Vue.js 如何在Vue计算属性中重复使用带参数的函数

在本文中，我们将介绍如何在Vue计算属性中重复使用带参数的函数。计算属性是Vue中的一个重要概念，它可以根据依赖的响应式数据进行计算，并返回一个新的值。有时候我们需要在计算属性中使用带参数的函数，而且希望这个函数可以在不同的计算属性中进行重复使用。

为了演示这个问题，我们假设有一个Vue组件中有一个名为todos的数组，每个todo包含一个name属性和done属性。我们需要计算未完成的todos的数量，以及根据指定的名称过滤todos的数组。

首先，我们可以创建一个名为filterTodos的方法，它接受一个参数name，并返回过滤后的todos数组。在这个方法中，我们使用了Array.prototype.filter()方法，通过比较每个todo的name属性和传入的name参数，来过滤满足条件的todos。

methods: {
  filterTodos(name) {
    return this.todos.filter(todo => todo.name === name);
  }
}

接下来，我们可以在计算属性中使用这个带参数的方法。首先，我们定义一个名为unfinishedTodosCount的计算属性，它返回未完成的todos的数量。在这个计算属性中，我们调用了filterTodos方法，并将参数指定为”未完成”。然后使用Array.prototype.length属性得到过滤后的结果数组的长度。

computed: {
  unfinishedTodosCount() {
    return this.filterTodos("未完成").length;
  }
}

现在，我们可以在Vue组件的模板中直接使用计算属性unfinishedTodosCount。

<template>
  <div>
    <h2>未完成的todos数量: {{ unfinishedTodosCount }}</h2>
  </div>
</template>

除了计算未完成的todos的数量，我们还可以创建一个名为filteredTodos的计算属性，它返回根据指定名称过滤过的todos数组。在这个计算属性中，我们调用了filterTodos方法，并将参数指定为computed属性filterName。

computed: {
  filterName() {
    return "Vue.js";
  },
  filteredTodos() {
    return this.filterTodos(this.filterName);
  }
}

这样，我们在Vue组件的模板中就可以直接使用计算属性filteredTodos。

<template>
  <div>
    <h2>根据名称过滤过的todos：</h2>
    <ul>
      <li v-for="todo in filteredTodos" :key="todo.id">{{ todo.name }}</li>
    </ul>
  </div>
</template>

阅读更多：Vue.js 教程