vue使用監(jiān)聽實(shí)現(xiàn)全選反選功能
最近在學(xué)習(xí)vue這一塊的內(nèi)容,在項(xiàng)目中用到了全選全不選的功能,開始的時(shí)候借鑒了別人寫的功能,但感覺(jué)寫的有一些缺陷,然后就自己寫了一套,如有寫的不好的地方,請(qǐng)各位大佬指教,廢話不多說(shuō),上代碼。
首先定義數(shù)據(jù)
data: { /*全選、全不選*/ allCheck:false,//全選功能 //循環(huán)數(shù)據(jù) checkArr:[ {cityName:"東城區(qū)",isCheck:false}, {cityName:"西城區(qū)",isCheck:false}, {cityName:"朝陽(yáng)區(qū)",isCheck:false}, {cityName:"豐臺(tái)區(qū)",isCheck:false}, ], }
然后是頁(yè)面代碼:
<div> <div v-for="carType in checkArr"> <p> <input type="checkbox" v-model="carType.isCheck"/> <a href="javascript:void(0)" rel="external nofollow" >{{carType.typeName}}</a> </p> </div> </div> <div> <input type="checkbox" id="chooseAllType" v-model="allCheck" @click="selectAll(allCheck)"/> 全選 </div>
下面是js中代碼
methods: { /*點(diǎn)擊全選,選中所有復(fù)選框*/ selectAll: function (data) { var _this = this; //如果父級(jí)被選中,那么子集循環(huán),全被給checked=true if (!data) { _this.checkArr.forEach(function (item) { item.isCheck = true; }); } else { //相反,如果沒(méi)有被選中,子集應(yīng)該全部checked=false _this.checkArr.forEach(function (item) { item.isCheck = false; }); } }, }
下面是監(jiān)聽部分代碼,主要功能為如果子集全部選中,全選按鈕同樣被勾選
watch:{ /*監(jiān)聽全選事件*/ checkArr:{ handler(value){ var _this = this; var count=0; for(var i=0;i<value.length;i++){ if(value[i].isCheck==true){ count++; } } //如果子集全部選中,全選按鈕設(shè)置選中狀態(tài) if(count==value.length){ _this.allCheck=true; }else{ _this.allCheck=false; } }, deep:true }, }
總結(jié)
以上所述是小編給大家介紹的vue使用監(jiān)聽實(shí)現(xiàn)全選反選功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
修改el-form-item中的label里面的字體邊距或者大小問(wèn)題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項(xiàng)目中對(duì)index.html中BASE_URL的配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法
Vue 路由過(guò)渡是對(duì) Vue 程序一種快速簡(jiǎn)便的增加個(gè)性化效果的的方法,這篇文章主要介紹了Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法,感興趣的可以了解一下2021-05-05vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下2018-09-09springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn)
這篇文章主要為大家介紹了springboot?vue接口測(cè)試前端動(dòng)態(tài)增刪表單功能實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)
這篇文章主要介紹了vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03