# vue: 处理复数形式和分支
URL: https://generaltranslation.com/zh/docs/vue/guides/handling-plurals-and-branches.mdx
---

title: 处理复数形式和分支
description: 如何使用 <Plural> 和 <Branch> 翻译基于计数和条件的 Vue 内容。
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

不同的区域设置可能需要不同的复数形式，以及针对条件采用不同的措辞。请将每种有限的备选内容放在具名插槽中，以便 CLI 提取每个完整短语。

当数字决定措辞时，使用 [`<Plural>`](/docs/vue/reference/components/plural)。对于状态、方案、布尔值及其他具名值，使用 [`<Branch>`](/docs/vue/reference/components/branch)。

## 选择复数形式或分支 [#choose]

* 当短语由数量决定时，使用 [`<Plural>`](/docs/vue/reference/components/plural)。
* 当短语由其他值决定时，使用 [`<Branch>`](/docs/vue/reference/components/branch)。
* 将任一组件置于 [`<T>`](/docs/vue/reference/components/t) 内，确保所有具名插槽都属于该翻译条目。
* 对于无法识别的类别或分支，使用默认插槽作为后备内容。
* 使用 [`<Num>`](/docs/vue/reference/components/num)、[`<Var>`](/docs/vue/reference/components/var) 或其他格式化组件包裹各短语中的运行时值。

## 使用 `<Plural>` 实现复数形式 [#plural]

通过 `:n` 传入计数值，并为源区域设置所用的类别提供具名插槽：

```vue
<script setup lang="ts">
import { Num, Plural, T } from 'gt-vue';

defineProps<{ count: number }>();
</script>

<template>
  <T>
    <Plural :n="count">
      <template #one>
        You have <Num :value="count" /> message.
      </template>
      <template #other>
        You have <Num :value="count" /> messages.
      </template>
      <template #default>
        You have new messages.
      </template>
    </Plural>
  </T>
</template>
```

[`<Plural>`](/docs/vue/reference/components/plural) 将绝对值 `0`、`1` 和 `2` 的数值覆盖与当前区域设置的 [Unicode CLDR 复数规则](https://cldr.unicode.org/index/cldr-spec/plural-rules)相结合。英语通常使用 `one` 和 `other`；目标语言的翻译可包含 `zero`、`two`、`few` 和 `many` 等其他类别。

不要用 `count === 1` 或通过添加后缀来处理复数语法。这些简化方式依据的是源语言规则，而非当前区域设置的规则。

## 根据命名值分支 [#branch]

通过 `:branch` 传入字符串、数字或布尔值，然后为每个预期值使用静态命名的插槽：

```vue
<script setup lang="ts">
import { Branch, T } from 'gt-vue';

defineProps<{ plan: 'free' | 'pro' | 'enterprise' }>();
</script>

<template>
  <T>
    <Branch :branch="plan">
      <template #free>Upgrade to unlock more.</template>
      <template #pro>Thanks for going Pro!</template>
      <template #enterprise>Contact your account manager.</template>
      <template #default>Welcome.</template>
    </Branch>
  </T>
</template>
```

每个插槽都会包含在外层的 [`<T>`](/docs/vue/reference/components/t) 条目中，但只会渲染活动分支。如果没有匹配的具名插槽，[`<Branch>`](/docs/vue/reference/components/branch) 会渲染默认插槽。

## 替换内联条件判断 [#conditionals]

内联 `v-if` 会在运行时改变翻译后的结构。请改用 [`<Branch>`](/docs/vue/reference/components/branch) 来处理有限的替代方案：

```vue
<!-- ❌ 运行时结构对翻译不可见 -->
<T>
  <span v-if="isActive">Active</span>
  <span v-else>Inactive</span>
</T>

<!-- ✅ 提取时每个短语都可见 -->
<T>
  <Branch :branch="isActive ? 'active' : 'inactive'">
    <template #active>Active</template>
    <template #inactive>Inactive</template>
  </Branch>
</T>
```

插槽名称必须是静态且无条件的。如果替代项集合在构建时无法确定，请将这类运行时内容置于 [`<T>`](/docs/vue/reference/components/t) 之外，或将其作为不透明的 [`<Var>`](/docs/vue/reference/components/var) 保留。
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales