【Vue】用Vue代码详细介绍computed计算属性的用法

当需要进行一些复杂的、依赖于其他属性的计算时,可以使用计算属性来处理这些计算,而不是在模板中直接进行计算。以下是使用Vue实现计算属性的示例:

商品价格:{{ price }} 元

折扣后价格:{{ discountPrice }} 元

javascript
var app = new Vue({
  el: '#app',
  data: {
    originPrice: 100, // 商品原价
    discount: 0.8 // 折扣
  },
  computed: {
    price: function() {
      // 计算商品价格
      return this.originPrice;
    },
    discountPrice: function() {
      // 计算折扣后的价格
      return this.originPrice * this.discount;
    }
  }
});

在上面的代码中,我们定义了两个计算属性:pricediscountPriceprice属性直接返回商品原价,而discountPrice属性则返回商品原价乘以折扣。在模板中,我们可以直接使用{{ price }}{{ discountPrice }}来显示商品价格和折扣后价格。

需要注意的是,计算属性的计算是惰性的,也就是说,它们只有在需要时才会进行计算,然后缓存起来,直到依赖的属性发生变化时才重新计算。这样可以避免不必要的计算,提高了应用程序的性能。

你可能感兴趣的:(vue.js,前端,javascript)