Javascript 如何在Vue js中计算折扣

我有一个简单的数据库，其中包含一些字段。字段如下：id、产品名称、原价、折扣 折扣字段以百分比表示。 我使用Axios一次性获取所有数据，并使用v-for在页面上进行渲染 代码：

---

如果我创建了此方法，如何在渲染时调用此方法，请提供帮助。

在服务器端进行此计算，只需将售后折扣指定为每个产品的最终折扣，您可以如下所示显示折扣

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

---

希望有帮助。

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

<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)
  }
}

你可以使用过滤器 var app=新的Vue{ el:“应用程序”， 资料{ 返回{ 名单：[{ 产品名称：“名称”， 原价：300， 折扣：8.5 },{ 产品名称：“名称”， 原价：1200， 折扣：7.5 },{ 产品名称：“名称”， 原价：3000， 折扣：5.5 }] } }, 过滤器：{ 价格折扣{ 返回v*折扣/10.toFixed2； } } } 产品：{{item.product_name} 价格：{{项目.原价} 折扣：{{item.discount}} priceAfterDiscount:{{item.original|priceAfterDiscountitem.discount}}

---

您可以通过计算属性替代方法来实现这一点，计算属性就是这样产生的。@FarrukhAyyaz谢谢您的回答。我是Vue Js的新手。你能告诉我怎样才能做到这一点吗？计算：{折扣{返回这个产品{u价格-这个.折扣}}谢谢你的回答。还有别的办法吗？我是说VUE方式？我已经准备了一个JSFIDLE示例，这样您就可以看到它的实际应用。

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

<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)
  }
}