利用Vue.js实现checkbox的全选反选效果
前言
这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧.
html示例代码
<template>
<div>
<inputtype='checkbox'class='input-checkbox'v-model='checked'v-on:click='checkedAll'>全选
<templatev-for='checkbincheckboxData'>
<inputtype='checkbox'name='checkboxinput'class='input-checkbox'v-model='checkboxModel'value='{{checkb.id}}'>{{checkb.value}}
</template>
</div>
</template>
js示例代码
<script>
exportdefault{
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()。
示例：
varvm=newVue({
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
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。