vue 一个有全选的购物车

这是一个基于Vue.js的购物车示例，它包含全选和取消全选功能：

<div id="app">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in cartItems" :key="item.id">
        <td><input type="checkbox" v-model="item.checked"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="decrement(item)">-</button>
          {{ item.quantity }}
          <button @click="increment(item)">+</button>
        </td>
        <td>{{ item.price * item.quantity }}</td>
      </tr>
    </tbody>
  </table>
  <p>Total: {{ total }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    cartItems: [
      {
        id: 1,
        name: 'iPhone',
        price: 999,
        quantity: 1,
        checked: true
      },
      {
        id: 2,
        name: 'iPad',
        price: 499,
        quantity: 2,
        checked: true
      },
      {
        id: 3,
        name: 'MacBook Pro',
        price: 1999,
        quantity: 1,
        checked: true
      }
    ],
    selectAll: true
  },
  computed: {
    total() {
      let sum = 0;
      this.cartItems.forEach(item => {
        if (item.checked) {
          sum += item.price * item.quantity;
        }
      });
      return sum;
    }
  },
  methods: {
    increment(item) {
      item.quantity++;
    },
    decrement(item) {
      if (item.quantity > 1) {
        item.quantity--;
      }
    }
  },
  watch: {
    selectAll() {
      this.cartItems.forEach(item => {
        item.checked = this.selectAll;
      });
    }
  }
});

在这个示例中，我们使用了一个包含三个商品的购物车数组。每个商品都有一个`checked`属性，我们使用它来跟踪哪些商品被选中。`selectAll`属性用于全选和取消全选功能。

在HTML中，我们使用`v-model`指令将`selectAll`和每个商品的`checked`属性绑定到复选框上。我们还使用`v-for`指令遍历购物车数组，并显示商品的名称、单价、数量和小计。

在计算属性中，我们计算所有选中商品的总价。

在方法中，我们实现了增加和减少数量的功能。

在观察器中，我们监听`selectAll`属性的变化，并将每个商品的`checked`属性设置为相应的值，以实现全选和取消全选功能。