用vue写一个简易的购物车可是实现数量的增减

在 Vue.js 中创建一个简单的购物车功能，你可以使用组件化的方式来管理商品和数量。首先，我们需要创建两个基本组件，一个是商品列表项（CartItem），另一个是购物车（ShoppingCart）。以下是简化的步骤：

1. **CartItem.vue**:

<template>
  <div class="cart-item">
    <img :src="product.image" :alt="product.name"/>
    <h3>{{ product.name }}</h3>
    <p>价格: {{ product.price }}</p>
    <button @click="decrement">-</button>
    <span class="quantity">{{ quantity }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  props: {
    product: { type: Object, required: true },
  },
  data() {
    return {
      quantity: 1,
    };
  },
  methods: {
    decrement() {
      if (this.quantity > 0) {
        this.quantity--;
      }
    },
    increment() {
      this.quantity++;
    },
  },
};
</script>

2. **ShoppingCart.vue**:

<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <CartItem :product="item" />
      </li>
    </ul>
    <button @click="addItem">添加商品</button>
  </div>
</template>

<script>
import CartItem from './CartItem.vue';

export default {
  components: {
    CartItem,
  },
  data() {
    return {
      items: [],
    };
  },
  methods: {
    addItem(product) {
      this.items.push({ name: product.name, price: product.price });
    },
  },
};
</script>

这个例子中，`CartItem`组件接受商品信息作为prop，并提供增加（+）和减少（-）数量的功能。`ShoppingCart`组件显示商品列表并包含一个添加按钮。