vue.js实现单选框、复选框和下拉框示例

Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.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；