Vue.js 如何计算并显示订单总价？

嘿，我来帮你搞定这个订单总价计算的问题！Vue的**计算属性（computed）**刚好完美适配这种需要动态响应数据变化的求和场景，下面是具体的实现步骤：

第一步：添加计算属性计算总价 #

在你的Vue组件的script部分，新增一个计算属性来自动计算订单总价。计算属性会自动追踪依赖的响应式变量（比如商品价格、配送选项），一旦这些变量变化，总价会实时更新：

export default {
  // 这里放你的data、props、methods等其他选项
  computed: {
    orderTotal() {
      // 初始总价为商品价格
      let total = this.product.product_price;
      // 如果用户选择了极速配送，加上配送费用
      if (this.orderData.fastDelivry) {
        total += this.delevryValue;
      }
      return total;
    }
  }
}

第二步：修改模板显示总价 #

把你现有模板里的总价行替换成绑定计算属性的代码，同时顺便修正几个拼写小错误（Doller→Dollar，delivry→delivery，避免后续可能的混淆）：

<ul>
  <li>Price : {{product.product_price}} Dollar</li>
  <li v-if="orderData.fastDelivry">Fast delivery : {{delevryValue}} Dollar</li>
  <li>Total : {{orderTotal}} Dollar</li>
</ul>

可选优化：格式化货币显示 #

如果需要更规范的货币格式（比如保留两位小数、添加美元符号），可以在计算属性里处理，或者用Vue的过滤器：

方法1：在计算属性中直接格式化 #

orderTotal() {
  let total = this.product.product_price;
  if (this.orderData.fastDelivry) {
    total += this.delevryValue;
  }
  // 保留两位小数，返回带美元符号的字符串
  return `$${total.toFixed(2)}`;
}

此时模板里直接写{{orderTotal}}即可。

方法2：使用Vue过滤器（Vue 2适用） #

export default {
  // ...其他选项
  filters: {
    formatCurrency(value) {
      return `$${value.toFixed(2)}`;
    }
  },
  computed: {
    orderTotal() {
      let total = this.product.product_price;
      if (this.orderData.fastDelivry) {
        total += this.delevryValue;
      }
      return total;
    }
  }
}

模板里这样使用：

<li>Total : {{orderTotal | formatCurrency}}</li>

这样一来，当用户切换极速配送选项、商品价格变动时，订单总价都会自动更新，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Mohamed Omar