微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

vue使用监听实现全选反选功能

最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码

首先定义数据

rush:js;"> data: { /*全选、全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false},{cityName:"西城区",{cityName:"朝阳区",{cityName:"丰台区",],}

然后是页面代码

rush:js;">
Box" v-model="carType.isCheck"/> {{carType.typeName}}

Box" id="chooseAllType" v-model="allCheck" @click="selectAll(allCheck)"/> 全选

下面是js中代码

rush:js;"> methods: { /*点击全选,选中所有复选框*/ selectAll: function (data) { var _this = this; //如果父级被选中,那么子集循环,全被给checked=true if (!data) { _this.checkArr.forEach(function (item) { item.isCheck = true; }); } else { //相反,如果没有被选中,子集应该全部checked=false _this.checkArr.forEach(function (item) { item.isCheck = false; }); } },}

下面是监听部分代码,主要功能为如果子集全部选中,全选按钮同样被勾选

rush:js;"> watch:{ /*监听全选事件*/ checkArr:{ handler(value){ var _this = this; var count=0; for(var i=0;i

总结

以上所述是小编给大家介绍的vue使用监听实现全选反选功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐