vue 计算购物车选中商品的总价

在Vue.js中，计算购物车选中商品的总价通常会涉及到组件的数据绑定和计算属性。首先，假设你有一个包含商品信息的商品列表数组，每个商品都有`price`和`quantity`属性。

创建一个计算属性`totalPrice`的例子：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in selectedItems" :key="index">
        {{ item.name }} - {{ item.price * item.quantity }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <p>总计: {{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 购物车商品数组
      selectedItems: [], // 已选择的商品列表
    };
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.selectedItems.forEach(item => {
        total += item.price * item.quantity;
      });
      return total;
    },
  },
  methods: {
    removeItem(index) {
      this.selectedItems.splice(index, 1);
      // 可能还需要更新购物车的数据库操作等
    }
  },
};
</script>

在这个例子中，当用户点击"删除"按钮时，会从`selectedItems`中移除商品，并实时计算并显示总价。如果`selectedItems`中的数据发生变化，`totalPrice`计算属性会自动更新。