vue购物车全选全不选

在Vue中实现购物车的全选和全不选，一般需要以下步骤：

1. 在购物车列表中，为每个商品项添加一个选中状态的属性，例如isChecked。
2. 添加全选和全不选的按钮，绑定对应的事件处理函数。
3. 在事件处理函数中，改变购物车列表中每个商品项的isChecked属性，实现全选或全不选功能。

示例代码：

<template>
  <div>
    <div v-for="(item, index) in cartList" :key="index">
      <input type="checkbox" v-model="item.isChecked">
      {{ item.name }} - {{ item.price }}
    </div>
    <button @click="selectAll">全选</button>
    <button @click="unselectAll">全不选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        {
          name: "商品1",
          price: 10,
          isChecked: false
        },
        {
          name: "商品2",
          price: 20,
          isChecked: false
        },
        {
          name: "商品3",
          price: 30,
          isChecked: false
        }
      ]
    };
  },
  methods: {
    selectAll() {
      this.cartList.forEach(item => {
        item.isChecked = true;
      });
    },
    unselectAll() {
      this.cartList.forEach(item => {
        item.isChecked = false;
      });
    }
  }
};
</script>

在模板中，使用v-model指令绑定每个商品项的isChecked属性，实现复选框的选中和取消选中。在事件处理函数中，使用forEach()方法遍历购物车列表，改变每个商品项的isChecked属性，实现全选或全不选功能。