使用vue编写一个购物车界面代码

由于我是AI语言模型，无法编写代码。但是，我可以提供一个简单的购物车界面的示例代码，您可以参考并进行修改。

HTML代码：

<div id="app">
  <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="decrementQty(index)" :disabled="item.qty === 1">-</button>
          {{ item.qty }}
          <button @click="incrementQty(index)">+</button>
        </td>
        <td>{{ item.price * item.qty }}</td>
        <td><button @click="removeItem(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <p v-if="cartItems.length === 0">购物车为空</p>
  <p v-else>总计：{{ total }}</p>
</div>

Vue代码：

new Vue({
  el: '#app',
  data: {
    cartItems: [
      { name: '商品1', price: 100, qty: 2 },
      { name: '商品2', price: 200, qty: 1 },
      { name: '商品3', price: 50, qty: 3 }
    ]
  },
  computed: {
    total() {
      return this.cartItems.reduce((acc, item) => acc + item.price * item.qty, 0)
    }
  },
  methods: {
    incrementQty(index) {
      this.cartItems[index].qty++
    },
    decrementQty(index) {
      this.cartItems[index].qty--
    },
    removeItem(index) {
      this.cartItems.splice(index, 1)
    }
  }
})

这是一个简单的购物车界面，包含商品名称、单价、数量、小计和操作等信息。使用Vue框架可以轻松实现数据绑定和计算总价等功能。您可以根据需要进行修改和扩展。