Vue计算属性传参(computed)

在 Vue 中，计算属性是一种方便的方式来处理复杂的逻辑和动态计算，而且它们也可以接受参数。通过传递参数给计算属性，你可以根据参数的不同值来返回不同的计算结果。以下是在 Vue 中传递参数给计算属性的示例：

假设你有一个 Vue 组件，其中有一个计算属性 discountedPrice，它根据商品价格和折扣率来计算折扣后的价格。

<template>
  <div>
    <p>原始价格: {{ originalPrice }}</p>
    <p>折扣后价格: {{ discountedPrice(0.1) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100
    };
  },
  computed: {
    discountedPrice() {
      return function(discountRate) {
        return this.originalPrice * (1 - discountRate);
      };
    }
  }
};
</script>

在上面的示例中，discountedPrice 计算属性是一个返回函数的计算属性。在模板中，我们可以像调用普通函数一样调用这个计算属性，并传递一个参数来计算折扣后的价格。在这个例子中，我们传递了 0.1 作为折扣率，计算出了 10% 的折扣。

需要注意的是，在计算属性内部使用函数来接受参数，这样可以确保计算属性在每次使用时都可以根据参数重新计算，而不会缓存结果。

这只是一个简单的示例，你可以根据自己的需求传递不同的参数给计算属性，从而实现更复杂的计算逻辑。