用Vue实现简单的购物车功能

<template>
  <div id="app">
    <h1>购物车示例</h1>
    <div v-for="(item, index) in cart" :key="index">
      <span>{{ item.name }} - 单价: {{ item.price }} - 数量: {{ item.quantity }}</span>
      <button @click="removeItem(index)">移除</button>
    </div>
    <h2>总计: {{ totalPrice }}</h2>
  </div>
</template>
 
<script>
export default {
  name: 'ShoppingCart',
  data() {
    return {
      cart: [
        { name: '商品A', price: 100, quantity: 1 },
        { name: '商品B', price: 200, quantity: 2 },
        { name: '商品C', price: 300, quantity: 3 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => {
        return total + (item.price * item.quantity);
      }, 0);
    }
  },
  methods: {
    removeItem(index) {
      this.cart.splice(index, 1);
    }
  }
};
</script>

这个简单的Vue示例展示了如何创建一个购物车组件，其中包括一个商品列表、数量和移除按钮，以及计算总价的功能。通过v-for指令循环渲染商品，使用计算属性totalPrice计算总价，并提供了一个removeItem方法来移除商品。这个示例简单易懂，适合作为Vue入门教程的一部分。