vue.js实现单选框、复选框和下拉框⽰例
Vue.js可以很⽅便的实现数据双向绑定，所以在处理表单，⼈机交互⽅⾯具有很⼤的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现⽅式。
⼀、单选框
原生js和js的区别在传统的HTML中实现单选框的⽅法如下：
<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值也很重要，当按钮被选中时，该值将发送给服务器；
⽤vue.js实现单选框⽐较⽅便，举例如下。我们不再需要name属性，只需要使⽤v-model指令给每个选
项绑定同⼀个变量就可以确保同⼀时间只有⼀个被选中，同时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>
⼆、复选框
在传统的HTML中实现复选框代码如下：
<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表征⼀个复选框以及选中情况。
在vue.js中构造复选框也与单选框类似，只是每个选项框都⽤v-model绑定⼀个变量，这些变量⼀般放在⼀个对象中，或者为v-model绑定⼀个相同的属性名称，且属性为数组；针对这两种情况的举例如下：
使⽤v-model为每个选项框绑定⼀个变量：
<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值。
三、下拉框
传统的⽤HTML构造下拉框的代码如下：
<select name="selected">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
其中name⽤于发送给服务器时的数据识别，value为选中时发送给服务器的值。如果option中省略value，那么发送给服务器的值为option标签之间的值。
⽤vue2.0实现下拉框的⽅法如下：
<div id="app">
<select v-model="selected">
<option v-for="item in items" v-bind:value="item.value">{{}}</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变量初始化为⼀个空数组)。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。