快捷導(dǎo)航

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

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

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

最近在學(xué)習(xí)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: {
  /*點擊全選，選中所有復(fù)選框*/
  selectAll: function (data) {
    var _this = this;
    //如果父級被選中，那么子集循環(huán)，全被給checked=true
    if (!data) {
      _this.checkArr.forEach(function (item) {
        item.isCheck = true;
      });
    } else {
      //相反，如果沒有被選中，子集應(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)聽實現(xiàn)全選反選功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù)，點擊跳轉(zhuǎn)到對應(yīng)的詳情頁，詳情頁可以添加并跳轉(zhuǎn)到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下
2022-10-10
Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作
這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue使用openlayers創(chuàng)建地圖
這篇文章主要為大家詳細(xì)介紹了vue項目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別,需要的朋友可以參考下
2024-02-02
在Vue3中使?echarts?圖表寬度自適應(yīng)變化的操作方法
本文介紹了在Vue3中使用ECharts時,如何使圖表容器寬度自適應(yīng)頁面大小,通過修改模板中的div樣式,將寬度設(shè)置為100%,并監(jiān)聽窗口大小變化事件,調(diào)用ECharts實例的resize方法,實現(xiàn)圖表的自適應(yīng)調(diào)整,感興趣的朋友跟隨小編一起看看吧
2025-02-02
Vue中JSX的基本用法及高級部分
JSX是一種Javascript的語法擴展,JSX = Javascript + XML,即在 Javascript里面寫XML,因為 JSX 的這個特性,所以他即具備了 Javascript的靈活性,同時又兼具h(yuǎn)tml的語義化和直觀性,這篇文章主要給大家介紹了關(guān)于Vue中JSX的基本用法及高級部分的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決
本文主要介紹了Vue開發(fā)中出現(xiàn)Loading?Chunk?Failed的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
vue3數(shù)組或?qū)ο筚x值不更新解決方法示例
這篇文章主要為大家介紹了vue3數(shù)組或?qū)ο筚x值不更新解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下
2021-07-07
Vue input輸入框中的值如何變成黑點問題
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04