利用Vue.js实现checkbox的全选反选效果
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
最近用vue做了两个项目，都需要实现全选反选的功能，所以想着记录下分享给大家，方便自己或者有需要的朋友们参考讲学习，所以狼蚁网站SEO优化这篇文章主要介绍了利用Vue.js实现checkbox的全选反选效果,需要的朋友可以一起来学习学习。
前言
这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,狼蚁网站SEO优化一起来看看具体是怎么实现的吧.
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
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
上一篇：js实现消息滚动效果
下一篇：微信小程序的动画效果详解