vue 實現(xiàn)全選全不選的示例代碼

更新時間：2018年03月29日 13:43:51 作者：Mr_ZhangQian

本篇文章主要介紹了vue 實現(xiàn)全選全不選的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

全選功能可以說是前端開發(fā)中非常常見的一個功能，以前的項目開發(fā)用jQuery開發(fā)比較多。最近在使用vue前端框架重構之前的項目。從jQuery到vue的轉變主要是一個思想想的轉變，是將原有的直接操作dom的思想轉變到操作數(shù)據(jù)，用數(shù)據(jù)驅動dom，也是vue框架的一個核心思想，思想轉變過來，對功能的實現(xiàn)自然容易理解一些。

例如下面這個簡單的demo

按照jQuery的思想來做的話，要選中全選checkbox和所有的checkbox項，分別注冊選中事件，判斷選中狀態(tài)來給相關的checkbox設置對應的狀態(tài)，這就涉及到很多的dom操作。

下面就看一下vue數(shù)據(jù)驅動dom的思想來實現(xiàn)這一功能。

vue數(shù)據(jù)驅動dom實現(xiàn)功能

<div class="checkbox">
  <label for="quan">
    <!-- 這里的 $event 是將當前對象傳入進去，具體詳情請參照vue官方文檔 -->
    <input id="quan" type="checkbox" @click="checkAll($event)"> 全選
  </label>
  <label>
    <!-- v-model 雙向數(shù)據(jù)綁定命令 -->
    <input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple
  </label>
  <label>
    <input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana
  </label>
  <label>
    <input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange
  </label>
</div>
<script>
  new Vue({
    el: '#app',
    data(){
      return {
        checkData: [] // 雙向綁定checkbox數(shù)據(jù)數(shù)組
      }
    },
    watch: { // 監(jiān)視雙向綁定的數(shù)據(jù)數(shù)組
      checkData: {
        handler(){ // 數(shù)據(jù)數(shù)組有變化將觸發(fā)此函數(shù)
          if(this.checkData.length == 3){
            document.querySelector('#quan').checked = true;
          }else {
            document.querySelector('#quan').checked = false;
          }
        },
        deep: true // 深度監(jiān)視
      }
    },
    methods: {
      checkAll(e){ // 點擊全選事件函數(shù)
        var checkObj = document.querySelectorAll('.checkItem'); // 獲取所有checkbox項
        if(e.target.checked){ // 判定全選checkbox的勾選狀態(tài)
          for(var i=0;i<checkObj.length;i++){
            if(!checkObj[i].checked){ // 將未勾選的checkbox選項push到綁定數(shù)組中
              this.checkData.push(checkObj[i].value);
            }
          }
        }else { // 如果是去掉全選則清空checkbox選項綁定數(shù)組
          this.checkData = [];
        }
      }
    }
  });
</script>

利用vue的雙向數(shù)據(jù)綁定v-model命令，當勾選時，checkbox的value值會自動push到所綁定的數(shù)組checkData中去，省去了不少對dom的操作。

如果是固定選項這樣是可以實現(xiàn)的，但是這種方法有一些弊端，雙向綁定數(shù)組數(shù)據(jù)是寫死的，不太靈活，如果增加了checkbox選項，要更改wach里綁定數(shù)組的長度判斷。

有時候checkbox選項也是后臺動態(tài)獲取過來的，這樣也靈活一些。

例如后臺數(shù)據(jù)是這樣的：

  ajaxData: [{
    name: 'a',
    value: 'apple'
  },{
    name: 'b',
    value: 'banana'
  },{
    name: 'c',
    value: 'orange'
  }]

需要先動態(tài)渲染checkbox選項，在進行數(shù)據(jù)綁定。

<div id="app">
  <div class="checkbox">
    <label for="quan">
      <!-- 這里的 $event 是將當前對象傳入進去，具體詳情請參照vue官方文檔 -->
      <input id="quan" type="checkbox" @click="checkAll($event)"> 全選
    </label>
    <label v-for="item in ajaxData">
      <!-- v-model 雙向數(shù)據(jù)綁定命令 -->
      <input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}
    </label>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data(){
      return {
        ajaxData: [{ // 后臺請求過來的數(shù)據(jù)
          name: '選項1',
          value: 'apple'
        },{
          name: '選項2',
          value: 'banana'
        },{
          name: '選項3',
          value: 'orange'
        }],
        checkData: [] // 雙向數(shù)據(jù)綁定的數(shù)組
      }
    },
    watch: {
      checkData: { // 監(jiān)視雙向綁定的數(shù)組變化
        handler(){
          if(this.checkData.length == this.ajaxData.length){
            document.querySelector('#quan').checked = true;
          }else {
            document.querySelector('#quan').checked = false;
          }
        },
        deep: true
      }
    },
    methods: {
      checkAll(e){ // 點擊全選事件
        if(e.target.checked){
          this.ajaxData.forEach((el,i)=>{
            // 數(shù)組里沒有這一個value才push，防止重復push
            if(this.checkData.indexOf(el.value) == '-1'){ 
              this.checkData.push(el.value);
            }
          });
        }else { // 全不選選則清空綁定的數(shù)組
          this.checkData = [];
        }
      }
    }
  });
</script>