Vue实现checkbox的全选和取消全选
html关键:复选按钮绑定同一个v-mode数组变量,数组里面有相应的value就被选中,选择就自动把:value="item.id"值添加到数组,取消就自动删除这个值。 <div><!--给全选按钮绑定v-mode变量,值为true时就是选中状态,绑定点击事件,执行全选和反选操作--><input type
·
html
关键:复选按钮绑定同一个v-mode数组变量,数组里面有相应的value就被选中,选择就自动把:value="item.id"值添加到数组,取消就自动删除这个值。
<div>
<!--给全选按钮绑定v-mode变量,值为true时就是选中状态,绑定点击事件,执行全选和反选操作-->
<input type='checkbox' v-model='checked' @click='checkedAll'>全选
<div v-for="item in data1">
<!--给每个复选按钮绑定同一个v-mode数组变量,数组里面有相应的value就被选中-->
<input type='checkbox' v-model='arr' :value="item.id" @click="fn2()">{{item.value}}
</div>
</div>
js
data(){
return{
data1:[{
id:'1',
value:'苹果'
},{
id:'2',
value:'荔枝'
},{
id:'3',
value:'香蕉'
},{
id:'4',
value:'火龙果'
}],
arr:[],
checked: false,
}
},
methods:{
//神奇的setTimeout 伪装异步
fn2(){
setTimeout(() => console.log(this.arr))
},
checkedAll: function() {
if (this.checked) {//实现反选
this.arr = [];
} else { //实现全选
this.arr = [];
this.data1.forEach( (item) => {
this.arr.push(item.id);
});
}
setTimeout(() => console.log(this.arr))
}
},
watch: { //深度 watcher
arr: {
handler: function (val, oldVal) {
if (this.arr.length === this.data1.length) {
this.checked=true;
} else {
this.checked=false;
}
},
deep: true
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)