从技术上讲，我们可以将参数传递给计算函数，就像我们可以在vuex中将参数传递给getter函数一样。这样的函数是返回另一个函数的函数。

例如，在存储的getter中:

{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}

这个getter可以映射到组件的计算函数:

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}

我们可以在模板中使用这个计算函数，如下所示:

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

我们可以应用相同的方法来创建一个接受参数的计算方法。

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ]),
  descriptionById: function() {
    return (id) => this.itemById(id).description;
  }
}

并在模板中使用它:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

话虽如此，我并不是说这是Vue的正确方式。

但是，我可以观察到，当具有指定ID的项在存储中发生变化时，视图确实会使用该项的新属性自动刷新其内容(绑定似乎工作得很好)。

[Vue2]过滤器是Vue组件提供的一种功能，允许您对模板动态数据的任何部分应用格式和转换。

它们不会改变组件的数据或任何东西，但只会影响输出。

假设你正在打印一个名字:

新Vue ({ 埃尔:“#容器”, 数据(){ 返回{ 名称:“玛丽亚”, 姓:“席尔瓦” ｝ }， 过滤器:{ Prepend: (name, lastname, prefix) => { 返回' ${prefix} ${name} ${lastname} ' ｝ ｝ })； < script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js " > < /脚本> < div id = "容器" > <p>{{name, lastname | prepend('Hello')}}!< / p > < / div >

请注意应用筛选器的语法，即| filterName。如果您熟悉Unix，那就是Unix管道操作符，用于将一个操作的输出作为输入传递给下一个操作。

组件的filters属性是一个对象。 单个过滤器是接受一个值并返回另一个值的函数。

返回值是Vue.js模板中实际打印的值。

在Vue3中删除了过滤器

是的方法是用来使用参数的。就像上面的答案一样，在你的例子中，最好使用方法，因为执行非常轻。

仅供参考，在方法复杂且成本较高的情况下，可以这样缓存结果:

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

注意:使用此方法时，如果处理的是数千，请注意内存

您可以使用方法，但我仍然倾向于使用计算属性而不是方法，如果它们不会改变数据或没有外部影响的话。

你可以通过这种方式将参数传递给计算属性(没有文档，但由维护者建议，不记得在哪里):

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

编辑:请不要使用此解决方案，它只会使代码复杂化，没有任何好处。

我没有看到一个清晰的Vue 3的例子，所以我添加了一个我工作的应用程序。首先调用一个方法，然后返回一个计算值。因此，该方法将在Vue重新渲染时被调用，但随后将返回缓存的计算值，并且仅在响应性输入变量发生变化时才执行。

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

const itemOne = ref(1);
const itemTwo = ref(2);

const getItemDoubled: (key) => {
    return computed(()=> item[key].value * 2);
}
</script>

<template>
    <p>get dynamic name computed value: {{ getItemDoubled('One') }}
    <p>get dynamic name computed value: {{ getItemDoubled('Two') }}
</template

也可以通过返回函数将参数传递给getter。当你想查询存储中的数组时，这特别有用:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

注意，通过方法访问的getter将在每次调用时运行，并且结果不会被缓存。

这被称为方法风格访问，它被记录在Vue.js文档中。