欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能

 更新時(shí)間：2018年07月06日 09:39:32   作者：粉墨聽(tīng)禪  
最近做的項(xiàng)目用到了全選全不選功能，于是我就自己動(dòng)手寫(xiě)了一個(gè)，基于vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能，具體實(shí)例代碼大家參考下本文

最近在學(xué)習(xí)vue這一塊的內(nèi)容，在項(xiàng)目中用到了全選全不選的功能，開(kāi)始的時(shí)候借鑒了別人寫(xiě)的功能，但感覺(jué)寫(xiě)的有一些缺陷，然后就自己寫(xiě)了一套，如有寫(xiě)的不好的地方，請(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)聽(tīng)部分代碼，主要功能為如果子集全部選中，全選按鈕同樣被勾選

watch:{
  /*監(jiān)聽(tīng)全選事件*/
  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)聽(tīng)實(shí)現(xiàn)全選反選功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論