vue使用监听实现全选反选功能
最近在学习vue这一块的内容,在项目中用到了全选全不选的功能,开始的时候借鉴了别人写的功能,但感觉写的有一些缺陷,然后就自己写了一套,如有写的不好的地方,请各位大佬指教,废话不多说,上代码。
首先定义数据
data:{ /*全选、全不选*/ allCheck:false,//全选功能 //循环数据 checkArr:[ {cityName:"东城区",isCheck:false}, {cityName:"西城区",isCheck:false}, {cityName:"朝阳区",isCheck:false}, {cityName:"丰台区",isCheck:false}, ], }
然后是页面代码:
{{carType.typeName}}
下面是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; varcount=0; for(vari=0;i总结
以上所述是小编给大家介绍的vue使用监听实现全选反选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!