怎么在vue中利用监听实现全选反选功能
本篇文章给大家分享的是有关怎么在vue中利用监听实现全选反选功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
10年积累的成都做网站、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有新和免费网站建设让你可以放心的选择与我们合作。
首先定义数据
data: {
/*全选、全不选*/
allCheck:false,//全选功能
//循环数据
checkArr:[
{cityName:"东城区",isCheck:false},
{cityName:"西城区",isCheck:false},
{cityName:"朝阳区",isCheck:false},
{cityName:"丰台区",isCheck:false},
],
}
然后是页面代码：
全选
下面是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;
});
}
},
}
下面是监听部分代码，主要功能为如果子集全部选中，全选按钮同样被勾选
watch:{
/*监听全选事件*/
checkArr:{
handler(value){
var _this = this;
var count=0;
for(var i=0;i
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
以上就是怎么在vue中利用监听实现全选反选功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
分享文章：怎么在vue中利用监听实现全选反选功能
标题链接：http://www.cdkjz.cn/article/iisipd.html
