Vue之表单控件绑定

1.text

<p>text输入文本</p>
	<span>Hello {{name}}</span>
        <input type="text" v-model="name" placeholder="yous name" name="">

2.checkbox

	<p>checkbox复选框</p>
        <input type="checkbox" id="checkbox" v-model="checkbox" name="">
        <label for="checkbox">{{checkbox}}</label>
        <input type="checkbox" id="flash" value="flash" v-model="bizLines" name="">
        <label for="flash">快车</label>
        <input type="checkbox" id="premium" value="premium" v-model="bizLines" name="">
        <label for="premium">专车</label>
        <input type="checkbox" id="bus" value="bus" v-model="bizLines" name="">
        <label for="bus">巴士</label>
        <span>选中的有: {{bizLines | json}}</span>

3.radio单选框

 <p>radio单选框</p>
        <input type="radio" id="flash2" value="快车" v-model="bizLine2" name="">
        <label for="flash2">快车</label>
        <input type="radio" id="bus2" value="巴士" v-model="bizLine2" name="">
        <label for="bus2">巴士</label>
        <span>Picked: {{bizLine2}}</span>

4.select下拉列表

<p>select下拉列表</p>
        <select v-model="bizLine3">
        	<option selected value="快车">快车</option>
        	<option value="专车">专车</option>
        	<option value="巴士">巴士</option>
        </select>
        <span>Selected: {{bizLine3}}</span>

5.select多选下拉

 <p>select多选下拉</p>
        <select v-model="bizLine4" multiple>
        	<option selected value="快车">快车</option>
        	<option value="专车">专车</option>
        	<option value="巴士">巴士</option>
        </select>
        <span>Selected: {{bizLine4 | json}}</span>

6.select v-for动态

<p>select v-for动态</p>
        <select v-model="bizLine5">
        	<option v-for="option in options" :value="option.value">
        		{{option.text}}
        	</option>
        </select>
        <span>Selected: {{bizLine5}}</span>

javascript代码:

var app=new Vue({
			el: '#app',
			data: {
				name: '',
				checkbox: '',
				bizLines: [],
				bizLine2: '快车',
				bizLine3: '快车',
                bizLine4: [],
                bizLine5: '快车',
                options: [{text:'快车',value:'快车'},{text:'专车',value:'专车'},{text:'巴士',value:'巴士'}]

			}
		})

阅读更多
上一篇Vue--计算属性(getter/setter)
下一篇Vue--过滤器limitBy fiterBy orderBy
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭