利用Vue.js实现checkbox的全选反选效果
发布时间：2020-12-17 03:04:32 所属栏目：百科 来源：网络整理
导读：前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示
前言这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果，之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项，再点全选结果就是反的了。后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码
全选
{{checkb.value}}
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 详细： 一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 示例： new: 2,old: 1
总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |