用vue写一个购物车界面

好的，下面是一个简单的购物车界面的Vue组件示例，包括商品列表、商品数量、商品价格、总价等功能：

<template>
  <div>
    <h2>购物车</h2>
    <table>
      <thead>
        <tr>
          <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>
            <button @click="decrementQuantity(index)">-</button>
            {{ item.quantity }}
            <button @click="incrementQuantity(index)">+</button>
          </td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="removeItem(index)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">总价:</td>
          <td colspan="2">{{ totalPrice }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { name: "商品A", price: 10, quantity: 1 },
        { name: "商品B", price: 20, quantity: 2 },
        { name: "商品C", price: 5, quantity: 3 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce(
        (total, item) => total + item.price * item.quantity,
        0
      );
    }
  },
  methods: {
    incrementQuantity(index) {
      this.cartItems[index].quantity++;
    },
    decrementQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--;
      }
    },
    removeItem(index) {
      this.cartItems.splice(index, 1);
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 10px;
}
</style>

在这个示例中，我们使用了一个`cartItems`数组来存储购物车中的商品信息，每个商品有一个名称、价格和数量。我们还使用了计算属性`totalPrice`来计算购物车中所有商品的总价。

此外，我们还定义了三个方法来增加、减少和删除商品的数量。每次点击“+”或“-”按钮，我们会更新相应商品的数量。当用户点击“删除”按钮时，我们将从数组中删除相应的商品。

最后，我们使用了一些简单的CSS来样式化购物车表格。