Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。
一、单选框
<div id="app">
<input type="radio" name="gender" value="man" id="man"/><label for="man">男</label>
<input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label>
</div>
注:这里name属性值必须相同,以确保同一时间只有一个能被选中。同时用于识别发送至服务器的数据;value值也很重要,当按钮被选中时,该值将发送给服务器;
<div id="app">
<label>男<input type="radio" v-model="gender" value="man"/></label>
<label>女<input type="radio" v-model="gender" value="woman"/></label>
<p>已选:{{gender}}</p><!--如果用原生js实现此功能比较麻烦-->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
gender:''
}
});
</script>
二、复选框
<div id="app">
<input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label>
<input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label>
<input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label>
</div>
从以上代码可以看到:HTML中单选框和复选框的构造方法类似,只是type值变成checkbox,同时也用name和value表征一个复选框以及选中情况。
<div id="app">
<label>jack<input type="checkbox" v-model="person.jack"/></label>
<label>bob<input type="checkbox" v-model="person.bob"/></label>
<label>alice <input type="checkbox" v-model="person.alice"/></label>
<p>已选:{{person}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
person: {jack: false, bob: false, alice: false}
}
})
</script>
从以上代码可以看到:这里已经不需要value属性,为每个属性绑定的值是boolean类型的,当选中时该值变为true,没选中为false;
给v-model绑定一个相同的数组类型的属性:
<div id="app">
<label>jack<input type="checkbox" v-model="whom" value="jack"/></label>
<label>bob<input type="checkbox" v-model="whom" value="bob"/></label>
<label>alice <input type="checkbox" v-model="whom" value="alice"/></label>
<p>已选:{{whom.join('|')}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
whom: []
}
})
</script>
从代码中可以看到:为每个选项都绑定一个相同的数组名称,这里需要value属性,当被选中时,相应的value值会加入到数组中,取消选中时,删除数组中对应的value值。
三、下拉框
<select name="selected">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
其中name用于发送给服务器时的数据识别,value为选中时发送给服务器的值。如果option中省略value,那么发送给服务器的值为option标签之间的值。
<div id="app">
<select v-model="selected">
<option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
</select>
<span>已选:{{selected}}</span>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],
selected:''
}
});
</script>
从代码中可以看到,使用v-for指令,避免重复书写option标签,同时用v-bind指令绑定value属性。当选中某一项时,该选项的value值赋给selected变量。
不管是html书写,还是vue实现,如果需要实现多选下拉框,只需要在select标签中写入multiple属性(同时vue中,selected变量初始化为一个空数组)