淘宝购物车html代码vue

以下是一个简单的淘宝购物车 HTML 代码的 Vue 实现：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cart" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="decrement(index)">-</button>
            {{ item.quantity }}
            <button @click="increment(index)">+</button>
          </td>
          <td>{{ item.price * item.quantity }}</td>
          <td>
            <button @click="removeItem(index)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总计：</td>
          <td>{{ total }}</td>
          <td>
            <button @click="clearCart">清空购物车</button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [
        { name: "商品1", price: 10, quantity: 2 },
        { name: "商品2", price: 20, quantity: 1 },
        { name: "商品3", price: 30, quantity: 3 },
      ],
    };
  },
  computed: {
    total() {
      return this.cart.reduce(
        (acc, item) => acc + item.price * item.quantity,
        0
      );
    },
  },
  methods: {
    increment(index) {
      this.cart[index].quantity++;
    },
    decrement(index) {
      if (this.cart[index].quantity > 1) {
        this.cart[index].quantity--;
      }
    },
    removeItem(index) {
      this.cart.splice(index, 1);
    },
    clearCart() {
      this.cart = [];
    },
  },
};
</script>

这个例子中，我们使用了 Vue 的模板语法和计算属性，来实现购物车中商品数量的增减、删除、清空等操作，并且实时计算出购物车中商品的总价。