如何在Vue中实现单词词尾变化（如名词单复数转换）

你现有的declOfNum函数可以直接在Vue中使用，该函数原本适配有3种数字变格规则的多语言场景，用于英文单复数时，按[单数形式, 复数形式, 复数形式]的格式传第二个参数即可。

1. 最简实现（单组件内使用，适合新手） #

直接把函数定义在组件内部，模板中直接调用即可，以下是Vue3单文件组件示例：

<template>
  <!-- 调用示例 -->
  <p>{{ dayCount }} {{ declOfNum(dayCount, ['day', 'days', 'days']) }}</p>
  <p>{{ detailCount }} {{ declOfNum(detailCount, ['detail', 'details', 'details']) }}</p>
</template>

<script setup>
import { ref } from 'vue'
// 测试数据
const dayCount = ref(3)
const detailCount = ref(1)

// 直接复用你的现有函数
function declOfNum(number, titles) {
  const cases = [2, 0, 1, 1, 1, 2]
  return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]
}
</script>

Vue2使用时同理，把函数写到组件的methods配置项中即可。

2. 全局复用方案（多组件使用时无需重复定义） #

步骤1：抽离为公共工具函数 #

新建src/utils/numberUtil.js文件，存放通用逻辑：

// 你的原变格函数
export function declOfNum(number, titles) {
  const cases = [2, 0, 1, 1, 1, 2]
  return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]]
}

// 封装英文单复数专用方法，简化调用
export function enPlural(num, singular, plural = `${singular}s`) {
  return declOfNum(num, [singular, plural, plural])
}

步骤2：挂载为全局方法 #

Vue3 挂载方式（main.js中配置）

import { createApp } from 'vue'
import App from './App.vue'
import { enPlural } from './utils/numberUtil'

const app = createApp(App)
// 挂载到全局实例，所有组件模板可直接调用
app.config.globalProperties.$enPlural = enPlural
app.mount('#app')

Vue2 挂载方式（main.js中配置）

import Vue from 'vue'
import App from './App.vue'
import { enPlural } from './utils/numberUtil'

// 挂载到Vue原型
Vue.prototype.$enPlural = enPlural

new Vue({
  render: h => h(App)
}).$mount('#app')

全局方法调用示例 #

任意组件的模板中无需导入，直接调用即可：

<template>
  <p>{{ count }} {{ $enPlural(count, 'day') }}</p>
  <p>{{ total }} {{ $enPlural(total, 'detail') }}</p>
</template>

3. 极简场景替代方案 #

如果只有少量位置需要处理英文单复数，也可以不用封装函数，直接在模板中用三元表达式实现：

<template>
  <p>{{ count }} day{{ count !== 1 ? 's' : '' }}</p>
  <p>{{ detailCount }} detail{{ detailCount !== 1 ? 's' : '' }}</p>
</template>

内容的提问来源于stack exchange，提问作者Alex