Vue 简单购物车

Vue.js是一个流行的JavaScript前端框架，它可以帮助开发者构建用户界面更易管理、响应式的应用。在Vue中实现简单购物车功能通常涉及以下几个步骤：

1. **数据绑定**：使用Vue的`v-model`指令将组件的状态与数据模型关联起来，比如商品的数量和总价。

<template>
  <div>
    <input type="number" v-model="cartItem.quantity">
    <button @click="increaseQuantity">+</button>
    <button @click="decreaseQuantity">-</button>
    <p>总价：{{ cartItem.total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItem: { quantity: 0, price: 10, total: 0 }
    };
  },
  methods: {
    increaseQuantity() {
      this.cartItem.quantity++;
      this.updateTotal();
    },
    decreaseQuantity() {
      if (this.cartItem.quantity > 0) {
        this.cartItem.quantity--;
        this.updateTotal();
      }
    },
    updateTotal() {
      this.cartItem.total = this.cartItem.quantity * this.cartItem.price;
    }
  }
};
</script>

2. **列表循环**：如果有多件商品，可以使用`v-for`遍历商品数组，并提供相应的操作按钮。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="number" v-model="item.quantity">
        <button @click="increaseQuantity(index)">+</button>
        <button @click="decreaseQuantity(index)">-</button>
        <p>价格：{{ item.price }} - 总价：{{ item.total }}</p>
      </li>
    </ul>
  </div>
</template>

...
data() {
  return {
    items: [
      { id: 1, price: 10, quantity: 0, total: 0 },
      // 添加更多商品...
    ]
  };
}
...

3. **状态管理**：对于复杂的应用，可以考虑使用Vuex库来统一管理购物车的数据，确保在整个应用中的同步和一致性。