用vue.js绑定复选框的方法：1、每个选项框都用【v-model】绑定一个变量，这些变量一般放在一个对象中；2、为【v-model】绑定一个相同的属性名称，且属性为数组。
用vue.js绑定复选框的方法：
在传统的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值。
以上就是如何用vue.js绑定复选框的详细内容，更多请关注易知道|edz.cc其它相关文章！
