vue做出全選與反選功能

這次帶給大家vue做出全選與反選功能，vue做出全選與反選功能的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

例如下面這個簡單的demo

#按照jQuery的想法來做的話，要選取全選checkbox和所有的checkbox項，分別註冊選取事件，判斷選取狀態來為相關的checkbox設定對應的狀態，這就牽涉到很多的dom操作。

下面就看一下vue資料驅動dom的想法來實現這個功能。

vue資料驅動dom實作功能

<p>
  <label>
    <!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->
    <input> 全选
  </label>
  <label>
    <!-- v-model 双向数据绑定命令 -->
    <input> apple
  </label>
  <label>
    <input> banana
  </label>
  <label>
    <input> orange
  </label>
</p>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data(){
      return {
        checkData: [] // 双向绑定checkbox数据数组
      }
    },
    watch: { // 监视双向绑定的数据数组
      checkData: {
        handler(){ // 数据数组有变化将触发此函数
          if(this.checkData.length == 3){
            document.querySelector(&#39;#quan&#39;).checked = true;
          }else {
            document.querySelector(&#39;#quan&#39;).checked = false;
          }
        },
        deep: true // 深度监视
      }
    },
    methods: {
      checkAll(e){ // 点击全选事件函数
        var checkObj = document.querySelectorAll(&#39;.checkItem&#39;); // 获取所有checkbox项
        if(e.target.checked){ // 判定全选checkbox的勾选状态
          for(var i=0;i<checkObj.length;i++){
            if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中
              this.checkData.push(checkObj[i].value);
            }
          }
        }else { // 如果是去掉全选则清空checkbox选项绑定数组
          this.checkData = [];
        }
      }
    }
  });
</script>

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

如果是固定選項這樣是可以實現的，但是這種方法有一些弊端，雙向綁定數組資料是寫死的，不太靈活，如果增加了checkbox選項，要更改wach裡綁定數組的長度判斷。

有時候checkbox選項也是後台動態取得過來的，這樣也靈活一些。

例如後台資料是這樣的：

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

需要先動態渲染checkbox選項，在進行資料綁定。

<p>
  </p><p>
    <label>
      <!-- 这里的 $event 是将当前对象传入进去，具体详情请参照vue官方文档 -->
      <input> 全选
    </label>
    <label>
      <!-- v-model 双向数据绑定命令 -->
      <input> {{item.name}}
    </label>
  </p>

<script>
  new Vue({
    el: &#39;#app&#39;,
    data(){
      return {
        ajaxData: [{ // 后台请求过来的数据
          name: &#39;选项1&#39;,
          value: &#39;apple&#39;
        },{
          name: &#39;选项2&#39;,
          value: &#39;banana&#39;
        },{
          name: &#39;选项3&#39;,
          value: &#39;orange&#39;
        }],
        checkData: [] // 双向数据绑定的数组
      }
    },
    watch: {
      checkData: { // 监视双向绑定的数组变化
        handler(){
          if(this.checkData.length == this.ajaxData.length){
            document.querySelector(&#39;#quan&#39;).checked = true;
          }else {
            document.querySelector(&#39;#quan&#39;).checked = false;
          }
        },
        deep: true
      }
    },
    methods: {
      checkAll(e){ // 点击全选事件
        if(e.target.checked){
          this.ajaxData.forEach((el,i)=>{
            // 数组里没有这一个value才push，防止重复push
            if(this.checkData.indexOf(el.value) == &#39;-1&#39;){ 
              this.checkData.push(el.value);
            }
          });
        }else { // 全不选选则清空绑定的数组
          this.checkData = [];
        }
      }
    }
  });
</script>

方法並不是最優的寫法，也存在一些弊端，歡迎各位指點迷津，一起探討。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue父元件呼叫子元件實戰案例

JS實作檔案拖曳步驟詳解（附程式碼）

以上是vue做出全選與反選功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！