假设你正在使用Vue来管理一个简单的购物车应用。购物车中存储了多个商品

在Vue.js中，管理一个简单的购物车应用通常会涉及到组件化的设计。首先，你会创建一个`Product`组件，它代表每个商品，包含属性如名称、价格和数量等。然后，`ShoppingCart`组件将是应用的核心部分，它会作为列表渲染出所有添加到购物车的商品。

在这个`ShoppingCart`组件内部，可以维护一个数组或对象，存储`Product`实例。每当你点击“添加到购物车”按钮时，新购买的商品会被推入这个数组，并可以通过索引来操作。你可以通过计算属性来跟踪总价，以及提供删除商品的功能。

例如：

// 商品模型 Product.vue
<template>
  <div>{{ name }} - {{ price * quantity }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      price: 0,
      quantity: 1
    };
  }
};
</script>

// 购物车组件 ShoppingCart.vue
<template>
  <ul>
    <li v-for="product in cartItems" :key="product.id">
      <Product :item="product"></Product>
      <button @click="removeItem(product)">Remove</button>
    </li>
  </ul>
</template>

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

export default {
  data() {
    return {
      cartItems: []
    };
  },
  methods: {
    addItem(product) {
      this.cartItems.push(product);
    },
    removeItem(item) {
      this.cartItems = this.cartItems.filter(cartItem => cartItem !== item);
    }
  }
};
</script>