用vue写一个简易的购物车

在 Vue.js 中编写一个简单的购物车功能，我们可以创建一个组件来表示购物车，包含商品列表、添加到购物车的操作以及购物车总价等基本元素。以下是简化的步骤：

1. 首先安装Vue CLI并创建一个新的项目：

npm install -g @vue/cli
vue create ShoppingCartApp
cd ShoppingCartApp

2. 然后在 `src/components` 目录下创建一个名为 `ShoppingCart.vue` 的文件，内容如下：

<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="(product, index) in products" :key="index">
        {{ product.name }} - {{ product.price }}
        <button @click=" addToCart(product)">加入购物车</button>
      </li>
    </ul>
    <p>Total: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '产品A', price: 10 },
        { name: '产品B', price: 20 },
        // 更多商品...
      ],
      cartItems: [],
      totalPrice: 0,
    };
  },
  methods: {
    addToCart(product) {
      this.cartItems.push(product);
      this.totalPrice += product.price;
    },
  },
};
</script>

<style scoped>
.shopping-cart {
  /* 样式 */
}
</style>

3. 在 App.vue 或其他合适的组件里引入并使用 Shopping Cart 组件：

<template>
  <div id="app">
    <!-- 其他内容 -->
    <ShoppingCart />
  </div>
</template>

<script>
import ShoppingCart from '@/components/ShoppingCart.vue';

export default {
  components: {
    ShoppingCart,
  },
};
</script>

4. 当然，为了实现真正的购物车功能，比如从服务器获取数据、存储购物车状态等，你可以考虑使用 Vuex 作为状态管理库。