vue3computed函数传参

Vue3中的计算属性可以通过传参来实现动态的数据显示。下面是一个示例：

import { computed } from 'vue';

const selfAge = computed(() => {
  return function(a, b) {
    return a + '年我' + age.value + '希望月薪' + b;
  };
});

// 在模板中使用计算属性传参
<div>{{ selfAge(2025, '20k') }}</div>
<div>{{ selfAge(2027, '25k') }}</div>
<div>{{ selfAge(2030, '35k') }}</div>

这个示例中，`selfAge`是一个计算属性，它返回一个函数。这个函数接受两个参数`a`和`b`，并根据这些参数和`age`的值来计算并返回一个字符串。在模板中，我们可以通过调用`selfAge`并传入不同的参数来动态地显示不同的数据。

相关问题

vue3 computed怎么传参

在Vue3中，computed属性默认不支持传递参数，但是可以使用一个函数来实现传递参数的效果。你可以在computed属性中定义一个函数，然后在函数内部使用返回一个函数的方式来实现传参。

下面是一个示例代码：

<template>
  <div>
    <p>{{ result }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { computed, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const getResult = computed(() => (num) => {
      return count.value + num;
    });

    const result = getResult.value(10);

    const increment = () => {
      count.value++;
    };

    return {
      result,
      increment,
    };
  },
};
</script>

在这个示例中，我们定义了一个计算属性getResult，它返回一个函数，这个函数接收一个参数num，然后在函数体内部计算结果并返回。在模板中，我们调用getResult.value(10)来获取计算结果，并将结果绑定到模板中显示。当我们点击“增加”按钮时，count.value会增加，然后getResult会重新计算并更新result的值。

vue3computed传参

在Vue3中，我们可以使用计算属性来传递参数。下面是一个例子：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <div v-if="isShow(item.id)">是否显示</div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const currentId = ref(null)

    const isShow = computed(() => {
      return (id) => {
        return currentId.value === id
      }
    })

    return {
      list: [
        { id: 1 },
        { id: 2 },
        { id: 3 }
      ],
      currentId,
      isShow
    }
  }
}
</script>

在这个例子中，我们使用了`computed`函数来创建一个计算属性`isShow`，并且在`setup`函数中返回了`list`、`currentId`和`isShow`。在模板中，我们使用`v-for`指令来遍历`list`数组，并且使用`:key`指令来为每个元素指定一个唯一的键。在`v-if`指令中，我们调用了`isShow`计算属性，并且传递了`item.id`作为参数。

当`currentId`的值发生变化时，`isShow`计算属性会重新计算，并且根据新的`currentId`值来判断是否显示元素。