js怎么给html加复选框,如何用vue.js绑定复选框

用vue.js绑定复选框的方法：1、每个选项框都用【v-model】绑定一个变量，这些变量一般放在一个对象中；2、为【v-model】绑定一个相同的属性名称，且属性为数组。

用vue.js绑定复选框的方法：

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

jack

bob

alice

从以上代码可以看到：HTML中单选框和复选框的构造方法类似，只是type值变成checkbox，同时也用name和value表征一个复选框以及选中情况。

在vue.js中构造复选框也与单选框类似，只是每个选项框都用v-model绑定一个变量，这些变量一般放在一个对象中，或者为v-model绑定一个相同的属性名称，且属性为数组；针对这两种情况的举例如下：

使用v-model为每个选项框绑定一个变量：

jack

bob

alice

已选：{{person}}

var app = new Vue({

el: '#app',

data: {

person: {jack: false, bob: false, alice: false}

}

})

从以上代码可以看到：这里已经不需要value属性，为每个属性绑定的值是boolean类型的，当选中时该值变为true，没选中为false；

给v-model绑定一个相同的数组类型的属性：

jack

bob

alice

已选：{{whom.join('|')}}

var app = new Vue({

el: '#app',

data: {

whom: []

}

})

从代码中可以看到：为每个选项都绑定一个相同的数组名称，这里需要value属性，当被选中时，相应的value值会加入到数组中，取消选中时，删除数组中对应的value值。