创建一个简单的 Vue 复数化过滤器

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

创建复数化函数的方法有很多，但在 Vue 中，你最好使用过滤器。我们来创建一个，因为多一个总是很方便的。

步骤 1：添加 pluralize 包

让我们使用https://github.com/blakeembrey/pluralize来完成繁重的工作：

yarn add pluralize

步骤 2：注册过滤器

我们的复数化过滤器将接受两个参数——第一个参数是过滤器中的左侧变量，第二个参数是过滤器函数参数（取决于您的代码结构，但通常是main.js或专门的过滤器文件）：

// .. your other imports
import pluralize from 'pluralize'

// .. your other code

Vue.filter('pluralize', function (value, number) {
  return pluralize(value, number)
})

步骤 3：使用过滤器！

现在，要使用左侧的过滤器，我们给它输入要变成复数的单词，并将单词数量作为参数传递：

{{ tunnels }} {{ 'tunnel' | pluralize(tunnels) }}

就是这样 :) 现在，根据隧道变量，它将是“1 条隧道”或“50 条隧道”。

希望这对您需要时有所帮助！