Vue-项目中勾选框、单选框、复选框的简单操作

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

一、单选框

在传统的HTML中实现单选框的方法如下：

<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>
</div>  

<script>  
    var app=new Vue({  
        el:'#app',  
        data:{  
            gender:''  
        }  
    });  
</script>

二、复选框

在传统的HTML中实现复选框代码如下：

<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>  

三、下拉框

传统的用HTML构造下拉框的代码如下：

<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>