帮我写一个Vue的购物车案例

好的，下面是一个简单的Vue购物车案例：

HTML部分:

<div id="app">
  <h2>购物车</h2>
  <ul>
    <li v-for="item in items">
      {{ item.name }} - {{ item.price }}元
      <button @click="addItem(item)">加入购物车</button>
    </li>
  </ul>
  
  <h2>我的购物车</h2>
  <ul>
    <li v-for="item in cartItems">
      {{ item.name }} - {{ item.price }}元 - {{ item.quantity }}件
      <button @click="removeItem(item)">删除</button>
    </li>
  </ul>
  
  <h2>总价: {{ totalPrice }}元</h2>
</div>

Vue部分:

new Vue({
  el: '#app',
  data: {
    items: [
      { name: '商品1', price: 100 },
      { name: '商品2', price: 200 },
      { name: '商品3', price: 300 }
    ],
    cartItems: [],
    totalPrice: 0
  },
  methods: {
    addItem(item) {
      const cartItem = this.cartItems.find(i => i.name === item.name)
      if (cartItem) {
        cartItem.quantity++
      } else {
        this.cartItems.push({
          ...item,
          quantity: 1
        })
      }
      this.totalPrice += item.price
    },
    removeItem(item) {
      const index = this.cartItems.indexOf(item)
      this.cartItems.splice(index, 1)
      this.totalPrice -= item.price * item.quantity
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
    }
  }
})

这个案例中，我们首先定义了一些商品，然后通过 `v-for` 指令展示了商品列表，每个商品都有一个“加入购物车”的按钮。当用户点击按钮时，我们将该商品添加到购物车中并更新总价。购物车中的商品也通过 `v-for` 展示，每个商品都有一个“删除”按钮，当用户点击时，我们将该商品从购物车中删除并更新总价。最后，我们通过计算属性 `totalPrice` 来计算出购物车中所有商品的总价。