利用Vue.js实现checkbox的全选反选效果

前言

这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.

html示例代码

全选

js示例代码

export default { methods:{ checkedAll: function() { var _this = this; console.log(_this.checkboxModel); if (this.checked) {//实现反选 _this.checkboxModel = []; }else{//实现全选 _this.checkboxModel = []; _this.checkboxData.forEach(function(item) { _this.checkboxModel.push(item.id); }); } } },watch: {//深度 watcher 'checkboxModel': { handler: function (val,oldVal) { if (this.checkboxModel.length === this.checkboxData.length) { this.checked=true; }else{ this.checked=false; } },deep: true } },data () { return { checkboxData:[{ id:'1',value:'苹果' },{ id:'2',value:'荔枝' },{ id:'3',value:'香蕉' },{ id:'4',value:'火龙果' }],checkboxModel:['1','3','4'],checked:"" } } }

watch

类型： Object

详细：

一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() 。

示例：

new: 2,old: 1

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。