Vue2 购物车代码示例 - 简单易懂

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - {{ item.price }}元
        <button @click="removeFromCart(index)">删除</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}元</p>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cartItems: [],
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price, 0);
    },
  },
  methods: {
    addToCart(item) {
      this.cartItems.push(item);
    },
    removeFromCart(index) {
      this.cartItems.splice(index, 1);
    },
    clearCart() {
      this.cartItems = [];
    },
  },
};
</script>
<p>在上面的代码中，我们定义了一个购物车组件，它包含一个显示购物车项目的列表，每个项目都有一个'删除'按钮。我们还添加了一个'总价'计算属性，该属性计算所有项目的价格总和。我们还定义了三个方法：<code>addToCart</code>，<code>removeFromCart</code>和<code>clearCart</code>。<code>addToCart</code>方法将一个新项目添加到购物车中，<code>removeFromCart</code>方法从购物车中删除一个项目，<code>clearCart</code>方法清空购物车。</p>