vue实现多选和取消多选的效果

一、要实现的效果

1.当点击“全选”时，能全选所有；

2.点取消掉列表的某个input框时，“全选”框不被选择；

二、html结构

前提： v-for循环遍历list，列表中的每个item都有checked属性，用v-model绑定item.checked；input标签有change方法，当值改变时生效
（1）单选：

<div v-for="(i,index) in list">
            <input type="checkbox"
              v-model="i.checked"
              @change="checkboxSelect" />
</div>

（2）全选：

        <div class="checkbox text">
          <input type="checkbox"
            v-model="checkAll"
            @change="checkAllChange">全选
        </div>

三、method方法

（1）单选：

    checkboxSelect() {
      // 选中的个数
      var num = this.list.filter(item => item.checked).length;
      // console.log(num);
      if (num == this.list.length) {
      //如果选中的数量为数组的长度，则全选框被选择
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    },

可简化为：

    checkboxSelect() {
      // every()检测数组中的元素是否符合条件，如果元素都满足条件，返回true；
      //只要有一个不满足，返回false
      this.checkAll = this.list.every(item => item.checked)
    }

（2）全选

    checkAllChange() {
      this.list.forEach(item => {
        // 把每个item的checked属性 设为 与全选框一致的值
        item.checked = this.checkAll
        // console.log('checkAllChange', item.checked)
      })
    }