vue计算属性实现总价

Vue计算属性实现总价

在Vue中，计算属性（computed）非常适合处理需要依赖其他数据动态计算的场景，例如购物车总价。以下是一个实现示例：

模板部分

<div id="app">
  <div v-for="item in cartItems" :key="item.id">
    {{ item.name }} - 单价: {{ item.price }} × 数量: {{ item.quantity }}
  </div>
  <p>总价: {{ totalPrice }}</p>
</div>

脚本部分

new Vue({
  el: '#app',
  data: {
    cartItems: [
      { id: 1, name: '商品A', price: 100, quantity: 2 },
      { id: 2, name: '商品B', price: 200, quantity: 1 }
    ]
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum, item) => {
        return sum + (item.price * item.quantity)
      }, 0)
    }
  }
})

计算属性的优势

计算属性具有缓存特性，只有当依赖的响应式数据（如cartItems数组或其中元素的price/quantity）发生变化时才会重新计算。这比在methods中定义方法更高效。

格式化输出

如需格式化总价显示，可以结合过滤器或方法：

computed: {
  formattedTotal() {
    return '¥' + this.totalPrice.toFixed(2)
  }
}

动态响应示例

当修改购物车中商品数量时，总价会自动更新：

methods: {
  increaseQuantity(item) {
    item.quantity++
  }
}

这种方式确保了数据变化的自动响应，无需手动触发计算。