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

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

<template> <div> <input type="checkbox" class="input-checkbox" v-model="checked" v-on:click="checkedAll">全选 <template v-for="checkb in checkboxData"> <input type="checkbox" name="checkboxinput" class="input-checkbox" v-model="checkboxModel" value="{{checkb.id}}">{{checkb.value}} </template> </div></template>

js示例代码

<script>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:"" }}}</script>

watch

类型： Object
详细：
一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch（） 。
示例：

var vm = new Vue（{ data: { a: 1 }, watch: { "a": function （val, oldVal） { console.log（"new: %s, old: %s", val, oldVal） }, // 方法名 "b": "someMethod", // 深度 watcher "c": { handler: function （val, oldVal） { /* ... */ }, deep: true } }}）vm.a = 2 // -> new: 2, old: 1

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