用vue写一个带全选反选和总价的购物车案例

好的，这是一个简单的购物车例子：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"/></th>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td><input type="checkbox" v-model="item.selected"/></td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="decreaseQuantity(item)" :disabled="item.quantity === 1">-</button>
            <span>{{ item.quantity }}</span>
            <button @click="increaseQuantity(item)">+</button>
          </td>
          <td>{{ item.price * item.quantity }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td><button @click="selectAll = !selectAll">{{ selectAll ? '取消全选' : '全选' }}</button></td>
          <td colspan="3">总价：</td>
          <td>{{ totalPrice }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品1', price: 10, quantity: 1, selected: false },
        { name: '商品2', price: 20, quantity: 2, selected: false },
        { name: '商品3', price: 30, quantity: 3, selected: false },
      ],
      selectAll: false,
    };
  },
  computed: {
    totalPrice() {
      return this.items
        .filter(item => item.selected)
        .reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
  methods: {
    toggleSelectAll() {
      if (this.selectAll) {
        this.items.forEach(item => item.selected = true);
      } else {
        this.items.forEach(item => item.selected = false);
      }
    },
    increaseQuantity(item) {
      item.quantity += 1;
    },
    decreaseQuantity(item) {
      item.quantity -= 1;
    },
  },
};
</script>

在这个例子中，我们使用 `v-model` 来绑定复选框的状态和每个商品的选择状态。我们还使用 `computed` 属性来计算购物车中所有已选择商品的总价。最后，我们使用 `methods` 中的函数来增加或减少商品的数量，并使用 `v-bind` 来禁用减少数量按钮（当商品数量为1时）。