如何在Vue.js中计算并展示商品折扣后价格？

嘿，我刚好处理过类似的需求，给你几个实用的方案，完美适配你的现有代码～

方法一：使用Vue方法（最贴合你的初始想法） #

既然你原本打算用方法实现，那这个方案最直接。我们可以定义一个专门计算折扣价的方法，接收原价和折扣率参数，然后在模板里调用它。

代码示例 #

首先在你的Vue实例中添加方法：

new Vue({
  el: '#app',
  data() {
    return {
      products: [] // Axios获取的数据会存在这里
    }
  },
  methods: {
    calculateDiscountedPrice(originalPrice, discount) {
      // 先把字符串转成数字，避免计算错误
      const price = parseFloat(originalPrice);
      const discountPercent = parseFloat(discount);
      
      // 核心计算逻辑：原价 × (1 - 折扣百分比/100)
      const discountedPrice = price * (1 - discountPercent / 100);
      
      // 可选：保留两位小数，让价格显示更规范
      return discountedPrice.toFixed(2);
    }
  },
  mounted() {
    // 这里放你的Axios请求逻辑
    // axios.get('/your-api-url').then(res => {
    //   this.products = res.data;
    // });
  }
})

然后修改模板，调用这个方法：

<ul v-for="product in products" :key="product.id"> <!-- 记得加key，Vue性能优化的最佳实践 -->
  <li>@{{product.product_name}}</li>
  <li>原价：@{{product.original_price}}</li>
  <li>折扣：@{{product.discount}}%</li>
  <li>折扣后价格：@{{calculateDiscountedPrice(product.original_price, product.discount)}}</li>
</ul>

方法二：使用计算属性（更符合Vue响应式最佳实践） #

如果你的产品数据量较大，计算属性会更合适——它会缓存计算结果，只有当依赖的products数据变化时才重新计算，性能更好。

代码示例 #

在Vue实例中定义计算属性：

new Vue({
  el: '#app',
  data() {
    return {
      products: []
    }
  },
  computed: {
    discountedProducts() {
      // 给每个产品添加一个折扣后价格的字段
      return this.products.map(product => ({
        ...product,
        discountedPrice: (parseFloat(product.original_price) * (1 - parseFloat(product.discount)/100)).toFixed(2)
      }));
    }
  },
  mounted() {
    // Axios请求逻辑
  }
})

模板中直接使用计算后的数组：

<ul v-for="product in discountedProducts" :key="product.id">
  <li>@{{product.product_name}}</li>
  <li>原价：@{{product.original_price}}</li>
  <li>折扣：@{{product.discount}}%</li>
  <li>折扣后价格：@{{product.discountedPrice}}</li>
</ul>

方法三：直接在模板中计算（快速但不推荐复杂场景） #

如果只是临时快速实现，也可以直接在模板里写计算逻辑，但这种方式会让模板变得臃肿，后期不好维护，只适合简单场景：

<ul v-for="product in products" :key="product.id">
  <li>@{{product.product_name}}</li>
  <li>原价：@{{product.original_price}}</li>
  <li>折扣：@{{product.discount}}%</li>
  <li>折扣后价格：@{{(parseFloat(product.original_price) * (1 - parseFloat(product.discount)/100)).toFixed(2)}}</li>
</ul>

内容的提问来源于stack exchange，提问作者Rakesh Kohali