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

好的，这里给您提供一个简单的Vue3购物车案例，具体实现如下：

1. 创建Vue实例

const app = Vue.createApp({
  data() {
    return {
      products: [
        {
          id: 1,
          name: '商品1',
          price: 100,
          count: 1
        },
        {
          id: 2,
          name: '商品2',
          price: 200,
          count: 1
        },
        {
          id: 3,
          name: '商品3',
          price: 300,
          count: 1
        }
      ],
      total: 0
    }
  },
  computed: {
    // 计算总价
    totalPrice() {
      let total = 0
      this.products.forEach(product => {
        total += product.price * product.count
      })
      this.total = total
      return total
    }
  },
  methods: {
    // 添加数量
    addCount(product) {
      product.count++
    },
    // 减少数量
    reduceCount(product) {
      if (product.count > 1) {
        product.count--
      }
    },
    // 删除商品
    removeProduct(product) {
      const index = this.products.findIndex(p => p.id === product.id)
      this.products.splice(index, 1)
    }
  }
})

2. 在模板中渲染商品列表

<div class="products">
  <div v-for="product in products" :key="product.id" class="product">
    <div class="name">{{ product.name }}</div>
    <div class="price">￥{{ product.price }}</div>
    <div class="count">
      <button @click="reduceCount(product)">-</button>
      <span>{{ product.count }}</span>
      <button @click="addCount(product)">+</button>
    </div>
    <div class="remove" @click="removeProduct(product)">删除</div>
  </div>
</div>

3. 显示总价

<div class="total">总价：{{ totalPrice }}</div>

这样一个简单的Vue3购物车就实现了，您可以根据自己的需求进行修改和扩展。