复数形式与关联消息
复数规则 @:key|@:key 语法、基于数量的复数形式，以及使用 @:path 的关联消息
复数形式与关联消息 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
计数因语言而异
英文中是“1 item”，但会说“5 items”——而其他语言可能有更多形式。将复数形式硬编码会产生“5 item(s)”这样不自然的字符串。Vue I18n 内置了复数化功能，可以根据计数选择正确的形式。
用竖线分隔复数形式
将各种形式写在同一条消息字符串中，并用竖线（|）字符分隔。对于英语，通常使用两种或三种形式。
const en = {
items: "no items | one item | {count} items",
}根据计数选择复数形式
将数字作为第二个参数传给t。Vue I18n 会根据计数选择匹配的形式。
const { t } = useI18n()
t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"默认复数规则
使用三种形式时，规则是：0使用第一种，1使用第二种，其他数值使用第三种。使用两种形式时，0 和多个数量会归为同一类。
const en = {
// two-form version: 0 and N share the plural
files: "no file | one file | {count} files",
}{count} 占位符
在复数消息中，特殊的{count}（或{n}）占位符会填入您传入的数字，因此您可以显示具体数值。
const en = { photos: "no photos | {count} photo | {count} photos" }
t("photos", 3) // "3 photos"在模板中使用复数
在模板中使用$t，并将计数作为第二个参数传入，方式与脚本中相同。
<template>
<p>{{ $t("items", cartCount) }}</p>
</template>组合计数和命名值
您可以同时传入计数和命名占位符，只需提供计数以及一个值对象。
const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }
t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)什么是链接消息？
有时，一条翻译需要嵌入另一条翻译，以避免重复。链接消息使用@:语法引用另一个键。
const en = {
brand: "Acme",
welcome: "Welcome to @:brand",
}解析链接
翻译welcome时，@:brand标记会被替换为brand的翻译值。只需修改一次brand，所有链接消息都会更新。
t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it使用嵌套键建立链接
链接也适用于带点号的嵌套键。必要时，请将包含多个单词的引用放在括号中。
const en = {
app: { name: "MyApp" },
footer: "Thanks for using @:(app.name)",
}链接上的修饰符
链接消息支持@.upper等修饰符，用于转换链接值（转为大写、转为小写或首字母大写）。
const en = {
brand: "acme",
banner: "@.upper:brand sale!", // "ACME sale!"
}快速检查
检查您对复数和链接的理解。
总结
您学会了复数和消息复用：
- 使用
|分隔复数形式："no items | one item | {count} items"。 - 将计数传给
t(key, count)，以选择正确的形式。 {count}占位符会显示数字。- 链接消息通过
@:otherKey复用另一个键（嵌套键使用@:(nested.key)）。 @.upper等修饰符会转换链接值。
常见问题解答
「复数形式与关联消息」课时是免费的吗？
是的 — 「复数形式与关联消息」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「复数形式与关联消息」这节课中我会学到什么？
复数规则 @:key|@:key 语法、基于数量的复数形式，以及使用 @:path 的关联消息 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「复数形式与关联消息」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。