vue中实现全选多选

一、给全选框绑定点击事件

HTML：

<div class="fixedLef" @click="chooseAllCart">
     <input type="checkbox" :checked="chooseAll" name id />
     <p>全选</p>
 </div>

 JS：

 chooseAllCart() {
//点击以后，给全选按钮修改状态，布尔值取反
      this.chooseAll = !this.chooseAll;
//给列表中的每一项同步状态
      for (var i = 0; i < this.shopcartList.length; i++) {
        this.shopcartList[i].choose = this.chooseAll;
      }
  },

二、单独自定义选择的时候

HTML：

      <ul class="spUl">
        <li v-for="(item,index) in shopcartList" :key="index" :index="index">
          <div class="spDesc">
            <div class="spName">{{item.goodsEntity.name}}</div>
            <input
              type="checkbox"
              //绑定当前元素的状态
              :checked="item.choose"
              name
              id
              class="oneCheck"
              //给点击事件传入被点击元素在当前数组列表中的索引
              @click="chooseOne(index)"
            />
          </div>
        </li>
      </ul>

JS：

chooseOne(index) {
      //给被点击的元素修改状态，布尔值取反即可
      this.shopcartList[index].choose = !this.shopcartList[index].choose;
      循环数组，只要有一项没被选中，即全选按钮就不会被修改为选中状态
      for (var i = 0; i < this.shopcartList.length; i++) {
        if (this.shopcartList[i].choose == false) {
          this.chooseAll = false;
          break;
        }
      }
      如果，一直循环到i等于数组长度还没出发break，即所有选项状态均为true，此时此刻就应该把全选按钮            
      修改为全选状态
      if (i == this.shopcartList.length) {
        this.chooseAll = true;
      }
 },