Vue2-computed计算属性-传参

406 阅读1分钟

在Vue中,计算属性是不能接收参数的,因为计算属性是基于它们的依赖进行缓存的。如果需要传递参数并且需要监听参数变化,则可以使用方法来替代计算属性。以下是一个简单的示例:

<template>
  <div>
    <p>商品价格: {{ formatPrice(100, 'USD') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    formatPrice(price, currency) {
      // 根据价格和货币类型进行格式化的逻辑
      return currency =='USD' ? `¥ ${price} USD` : `¥ ${price} RMB`;
    }
  }
}
</script>

注意:虽然方法可以实现类似带参数的计算属性的功能,但是方法不会像计算属性一样进行缓存,每次重新渲染时都会执行。