uniapp实现购物车 全选 单选 反选

在UniApp中实现购物车的全选、单选和反选功能，可以通过以下步骤进行操作：

1. 数据结构设计：首先，你需要定义一个购物车数据结构，可以使用数组或对象来表示每个商品的信息，例如商品名称、价格、数量等。同时，为每个商品添加一个选中状态的属性，用于记录是否被选中。

2. 渲染购物车列表：在页面中使用`v-for`指令遍历购物车数据，并将商品信息展示出来。同时，为每个商品的选中状态绑定一个`v-model`指令，用于实现单选功能。

3. 实现全选功能：添加一个全选的复选框，通过绑定一个变量来控制全选的状态。当全选复选框被点击时，遍历购物车数据，将每个商品的选中状态与全选状态保持一致。

4. 实现反选功能：添加一个反选按钮，当点击反选按钮时，遍历购物车数据，将每个商品的选中状态取反。

5. 计算总价和总数量：通过遍历购物车数据，累加选中商品的价格和数量，得到总价和总数量。

6. 相关代码示例：

<template>
  <div>
    <div>
      <input type="checkbox" v-model="selectAll" @change="handleSelectAll" /> 全选
      <button @click="handleInverseSelect">反选</button>
    </div>
    <div v-for="(item, index) in cartList" :key="index">
      <input type="checkbox" v-model="item.selected" @change="handleSelectItem(index)" /> {{ item.name }} - ￥{{ item.price }} - 数量：{{ item.quantity }}
    </div>
    <div>
      总价：￥{{ totalPrice }}，总数量：{{ totalQuantity }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      cartList: [
        { name: '商品1', price: 10, quantity: 1, selected: false },
        { name: '商品2', price: 20, quantity: 2, selected: false },
        { name: '商品3', price: 30, quantity: 3, selected: false }
      ]
    };
  },
  computed: {
    totalPrice() {
      let total = 0;
      for (let item of this.cartList) {
        if (item.selected) {
          total += item.price * item.quantity;
        }
      }
      return total;
    },
    totalQuantity() {
      let total = 0;
      for (let item of this.cartList) {
        if (item.selected) {
          total += item.quantity;
        }
      }
      return total;
    }
  },
  methods: {
    handleSelectAll() {
      for (let item of this.cartList) {
        item.selected = this.selectAll;
      }
    },
    handleSelectItem(index) {
      this.cartList[index].selected = !this.cartList[index].selected;
    },
    handleInverseSelect() {
      for (let item of this.cartList) {
        item.selected = !item.selected;
      }
    }
  }
};
</script>