Vue實現checkbox的全選和取消全選

html

關鍵：複選按鈕綁定同一個v-mode數組變量，數組裏面有相應的value就被選中，選擇就自動把:value="item.id"值添加到數組，取消就自動刪除這個值。

 

    <div>
      <!--給全選按鈕綁定v-mode變量，值爲true時就是選中狀態，綁定點擊事件，執行全選和反選操作-->
      <input type='checkbox'  v-model='checked' @click='checkedAll'>全選
      <div v-for="item in data1">
        <!--給每個複選按鈕綁定同一個v-mode數組變量，數組裏面有相應的value就被選中-->
        <input type='checkbox' v-model='arr' :value="item.id" @click="fn2()">{{item.value}}
      </div>
    </div>

js

    data(){
      return{

          data1:[{
            id:'1',
            value:'蘋果'
          },{
            id:'2',
            value:'荔枝'
          },{
            id:'3',
            value:'香蕉'
          },{
            id:'4',
            value:'火龍果'
          }],
          arr:[],
          checked: false,
        }

    },   
 methods:{
      //神奇的setTimeout 僞裝異步
      fn2(){
        setTimeout(() => console.log(this.arr))
      },
      checkedAll: function() {
        if (this.checked) {//實現反選
          this.arr = [];
        } else { //實現全選
          this.arr = [];
          this.data1.forEach( (item) => {
            this.arr.push(item.id);
          });
        }
        setTimeout(() => console.log(this.arr))
      }
    },
    watch: { //深度 watcher
      arr: {
        handler: function (val, oldVal) {
          if (this.arr.length === this.data1.length) {
            this.checked=true;
          } else {
            this.checked=false;
          }
        },
        deep: true
      }


    }

大表哥