Uniapp小程序用Vue 2语法写出购物车单选全选

可以参考以下代码实现购物车单选全选功能：

<template>
  <div>
    <div v-for="(item, index) in cartList" :key="index">
      <label>
        <input type="checkbox" v-model="item.checked" @change="handleCheckboxChange">
        {{ item.name }}
      </label>
      <span>{{ item.price }}</span>
    </div>
    <div>
      <label>
        <input type="checkbox" v-model="isAllChecked" @change="handleAllCheckboxChange">
        全选
      </label>
      <span>{{ totalPrice }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        { name: '商品1', price: 10, checked: false },
        { name: '商品2', price: 20, checked: false },
        { name: '商品3', price: 30, checked: false }
      ]
    }
  },
  computed: {
    isAllChecked() {
      return this.cartList.every(item => item.checked)
    },
    totalPrice() {
      return this.cartList.filter(item => item.checked).reduce((total, item) => total + item.price, 0)
    }
  },
  methods: {
    handleCheckboxChange() {
      this.$nextTick(() => {
        this.isAllChecked = this.cartList.every(item => item.checked)
      })
    },
    handleAllCheckboxChange() {
      this.cartList.forEach(item => {
        item.checked = this.isAllChecked
      })
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个 `cartList` 数组来存储购物车中的商品信息，每个商品包括名称、价格和是否选中三个属性。接着，我们通过 `v-for` 指令遍历 `cartList` 数组，动态生成购物车列表。

在购物车列表中，我们使用了一个复选框来表示每个商品的选中状态，使用了 `v-model` 指令来双向绑定商品的 `checked` 属性。当用户点击某个商品的复选框时，我们通过 `@change` 监听其变化，并在 `handleCheckboxChange` 方法中更新全选复选框的选中状态。

在最后一行，我们使用了一个全选复选框来表示购物车中所有商品的选中状态。与单个商品的复选框类似，我们使用了 `v-model` 指令来双向绑定全选复选框的 `isAllChecked` 属性。当用户点击全选复选框时，我们通过 `@change` 监听其变化，并在 `handleAllCheckboxChange` 方法中更新所有商品的选中状态。同时，我们还使用了计算属性来计算购物车中所有选中商品的总价。