vue购物车全选同步单选逻辑处理

一 单选同步多选

 （1）单选添加一个点击事件，然后动态绑定checked

 如下：

  <input type="checkbox" v-on:click="checkedtoAll(item)" :checked="item.checked" />

　　（2）在methods中，单选的状态取反，然后循环遍历购物车数组中的商品，如果每一个商品的选中状态都为true的话，则绑定的全选框的状态使与单选状态一样，即实现了单选同步多选

    多选框状态：

<input type="checkbox" v-model="allChecked" v-on:click="alltoChecked" />全选

  状态：

export default {
  data() {
    return {
      cartItem: [],
      allChecked: false
    };
  },

methods中逻辑处理：

  checkedtoAll(item) {
      item.checked = !item.checked;
      var checkedALL = this.cartItem.every(e => {
        return e.checked === true;
      });
      this.allChecked = checkedALL;
    }

二 多选同步单选

逻辑不同于单选，将多选状态取反，然后循环遍历购物车中的商品，使购物车中的每个商品的选中状态都与多选的选中状态相同

逻辑如下

 

 alltoChecked() {
      this.allChecked = !this.allChecked;
      //  window.console.log(this.allChecked)
      this.cartItem.forEach(e => {
        e.checked = this.allChecked;
      });
    },