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

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

a3de60244e50d10fc2db2cda39788ae7.png

用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值。

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值