Question

我有一个包含一些字段的简单数据库。字段如下：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;
    }

如果我创建了这个方法，我怎样才能在渲染时调用这个方法请帮忙。

Answer 1

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

test=['S123X_ILL_BE_BACK','BA34_HASTA_LA_VISTA_BABY','JA3841_SARAH','J102_CONNOR']

Answer 2

在您的服务器端进行该计算，只需将 after_discount 指定为每个产品的最终折扣，您就可以显示以下折扣。

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

希望有所帮助。

Answer 3

你可以使用过滤器

＆＃13;

var app = new Vue({
  el: '#app',
  data () {
    return {
      list: [{
        product_name: 'name',
        original_price: 300,
        discount: 8.5
      },{
        product_name: 'name',
        original_price: 1200,
        discount: 7.5
      },{
        product_name: 'name',
        original_price: 3000,
        discount: 5.5
      }]
    }
  },
  filters: {
    priceAfterDiscount (v,discount) {
      return (v * discount / 10).toFixed(2);
    }
  }
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <ul v-for="item of list">
      <li>product: {{item.product_name}}</li>
      <li>price: {{item.original_price}}</li>
      <li>discount: {{item.discount}}</li>
      <li>priceAfterDiscount: {{item.original_price | priceAfterDiscount(item.discount)}}</li>
    </ul>
</div>

＆＃13;

如何计算Vue js的折扣

3 个答案: