时间戳

首页 > 解决方案 > 如何在Vue js中计算折扣

javascript - 如何在Vue js中计算折扣

问题描述

我有一个包含一些字段的简单数据库。字段如下： id,product_name,original_price, discount 折扣字段为百分比。我使用 Axios 获取所有数据并使用v-for 代码在页面上呈现：

<ul v-for="product in products">
   <li>@{{product.product_name}}</li>
   <li>@{{product.original_price}}</li>
   <li>@{{product.discount}}</li>
</ul>

在这里，我想显示折扣后的计算价格。我可以像这样在 Vue 实例中创建一个方法：

      calculateDiscount: function(orig_price, discount){
                         this.discount_amt = discount/100*orig_price;
                         return this.after_discount = orig_price - this.discount_amt;
    }

如果我创建此方法，我如何在渲染时调用此方法，请帮忙。

标签： javascriptvue.jsvuejs2

解决方案

您不能使用计算属性，因为您需要对 products 中的每个产品进行计算，并且计算属性不能采用任何参数。
您可以改用方法：

<ul v-for="product in products">
  <li>@{{product.product_name}}</li>
  <li>@{{product.original_price}}</li>
  <li>@{{product.discount}}</li>
  <li>@{{ discountedPrice(product) }}</li>
</ul>


methods: {
  discountedPrice(product) {
    return product.original_price - (product.original_price *(product.discount)/100)
  }
}

推荐阅读