vue 计算价格 实现代码

在Vue中计算价格可以使用computed属性来实现。

假设有一个商品列表，每个商品的价格和数量都已经在data中定义好了，可以这样实现计算总价：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in productList" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
        <input type="number" v-model="item.quantity">
      </li>
    </ul>
    <p>Total: {{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {
          name: "Product A",
          price: 10,
          quantity: 1
        },
        {
          name: "Product B",
          price: 20,
          quantity: 2
        },
        {
          name: "Product C",
          price: 30,
          quantity: 3
        }
      ]
    };
  },
  computed: {
    total() {
      let sum = 0;
      this.productList.forEach(item => {
        sum += item.price * item.quantity;
      });
      return sum;
    }
  }
};
</script>

在这个例子中，我们使用了v-model指令来绑定商品数量的输入框，当输入框的值改变时，total计算属性会重新计算总价，并更新到模板中。

注意，computed属性只会在其依赖的数据发生变化时重新计算，因此能有效地减少不必要的计算。