vue使用監(jiān)聽實現(xiàn)全選反選功能

更新時間：2018年07月06日 09:39:32 作者：粉墨聽禪

最近做的項目用到了全選全不選功能，于是我就自己動手寫了一個，基于vue使用監(jiān)聽實現(xiàn)全選反選功能，具體實例代碼大家參考下本文

最近在學習vue這一塊的內(nèi)容，在項目中用到了全選全不選的功能，開始的時候借鑒了別人寫的功能，但感覺寫的有一些缺陷，然后就自己寫了一套，如有寫的不好的地方，請各位大佬指教，廢話不多說，上代碼。

首先定義數(shù)據(jù)

data: {
   /*全選、全不選*/
   allCheck:false,//全選功能
   //循環(huán)數(shù)據(jù)
   checkArr:[
     {cityName:"東城區(qū)",isCheck:false},
     {cityName:"西城區(qū)",isCheck:false},
     {cityName:"朝陽區(qū)",isCheck:false},
     {cityName:"豐臺區(qū)",isCheck:false},
   ],
}

然后是頁面代碼：

 <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: {
  /*點擊全選，選中所有復選框*/
  selectAll: function (data) {
    var _this = this;
    //如果父級被選中，那么子集循環(huán)，全被給checked=true
    if (!data) {
      _this.checkArr.forEach(function (item) {
        item.isCheck = true;
      });
    } else {
      //相反，如果沒有被選中，子集應該全部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++;
        }
      }
      //如果子集全部選中，全選按鈕設置選中狀態(tài)
      if(count==value.length){
        _this.allCheck=true;
      }else{
        _this.allCheck=false;
      }
    },
    deep:true
  },
}

總結(jié)

以上所述是小編給大家介紹的vue使用監(jiān)聽實現(xiàn)全選反選功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: