一个购物车增删的演示代码

<template>
  <view>
    <view v-for="(item, index) in cartList" :key="index">
      <text>{{ item.name }} - 数量: {{ item.quantity }}</text>
      <button @click="increaseQuantity(index)">+</button>
      <button @click="decreaseQuantity(index)">-</button>
      <button @click="removeFromCart(index)">移除</button>
    </view>
    <view>总计: ￥{{ totalPrice }}</view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      cartList: [
        { name: '商品A', quantity: 1, price: 100 },
        { name: '商品B', quantity: 2, price: 200 },
        // 添加更多商品数据...
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartList.reduce((total, item) => {
        return total + item.quantity * item.price;
      }, 0);
    }
  },
  methods: {
    increaseQuantity(index) {
      this.cartList[index].quantity++;
    },
    decreaseQuantity(index) {
      if (this.cartList[index].quantity > 1) {
        this.cartList[index].quantity--;
      }
    },
    removeFromCart(index) {
      this.cartList.splice(index, 1);
    }
  }
};
</script>