用vue写一个购物车界面

好的，下面是一个简单的购物车界面，使用Vue来实现：

<template>
  <div>
    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cartItems" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="decreaseQuantity(index)" :disabled="item.quantity === 1">-</button>
            {{ item.quantity }}
            <button @click="increaseQuantity(index)">+</button>
          </td>
          <td>{{ item.price * item.quantity }}</td>
          <td><button @click="removeItem(index)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <p v-if="cartItems.length === 0">购物车为空</p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        {
          name: '商品1',
          price: 10,
          quantity: 2
        },
        {
          name: '商品2',
          price: 20,
          quantity: 1
        }
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
    }
  },
  methods: {
    increaseQuantity(index) {
      this.cartItems[index].quantity++
    },
    decreaseQuantity(index) {
      this.cartItems[index].quantity--
    },
    removeItem(index) {
      this.cartItems.splice(index, 1)
    }
  }
}
</script>

这里使用了一个简单的数据结构来存储购物车中的商品，每个商品包含了名称、价格和数量。使用`v-for`指令来循环渲染每个商品，并使用计算属性来计算总价。还定义了一些方法来增加、减少和删除商品。