# vue: <Plural>
URL: https://generaltranslation.com/zh/docs/vue/reference/components/plural.mdx
---

title: "<Plural>"
description: 根据当前区域设置的复数规则渲染基于计数的内容。<Plural> 组件的 API 参考。

---

`<Plural>` 组件会根据数值计数和当前区域设置的复数规则选择具名插槽。当其备选内容需要翻译时，请将其放在 [`<T>`](/docs/vue/reference/components/t) 内。

## 概述 [#overview]

通过 `n` 传入计数值，并为源内容所需的形式定义静态命名槽位：

```vue
<Plural :n="count">
  <template #one>One item</template>
  <template #other>Several items</template>
  <template #default>No matching form</template>
</Plural>
```

当动态 count 出现在分支的渲染文本中时，请用 [`<Num>`](/docs/vue/reference/components/num) 将其包裹起来。

## 工作原理 [#how-it-works]

* **数值覆盖。** 如果提供了 `zero`，则用于处理绝对值为 `0` 的情况；`singular` 优先于 `one` 处理 `1`；`dual` 优先于 `two` 处理 `2`。这些覆盖规则会先于区域设置规则生效。
* **基于区域设置的选择。** 否则，`Intl.PluralRules` 会确定区域设置对应的 CLDR 类别。`singular` 和 `dual` 可以作为区域设置中 `one` 和 `two` 类别的别名；随后 `plural` 和 `other` 会依次作为通用后备内容。
* **后备内容。** 如果提供的形式均不匹配，则渲染默认插槽。该组件不会添加任何 HTML 包装元素。
* **静态提取。** 在 [`<T>`](/docs/vue/reference/components/t) 内，即使运行时只渲染一个分支，提取器仍会记录所有受支持的命名分支。

对于独立使用的 `<Plural>`，配置的默认区域设置会忽略显式指定的 `locales`，仅使用该默认区域设置。在其他当前区域设置下，独立组件会依次尝试显式指定的 `locales`、当前区域设置和默认区域设置。

在 [`<T>`](/docs/vue/reference/components/t) 内，富文本翻译会控制复数形式的选择。源后备内容使用默认区域设置；已翻译内容会先尝试当前区域设置，再尝试默认区域设置。在这种情况下，会忽略显式指定的 `locales` prop。

## 属性和插槽 [#props]

| 名称                         | 说明               | 类型           | 可选 | 默认值      |
| -------------------------- | ---------------- | ------------ | -- | -------- |
| [`n`](#n)                  | 用于选择复数形式的计数值。    | `number`     | 否  | —        |
| [`locales`](#locales)      | 用于选择复数形式的首选区域设置。 | `string[]`   | 是  | 区域设置解析顺序 |
| [`default`](#default-slot) | 未匹配任何形式时渲染的内容。   | `VNodeChild` | 是  | 空        |
| [`[form]`](#form-slots)    | 对应一种受支持复数形式的内容。  | `VNodeChild` | 是  | —        |

### `n`

**类型** `number` · **必填**

用于选择复数类别的计数。请使用 [`<Num>`](/docs/vue/reference/components/num) 单独显示计数值；`n` 仅用于控制选择。

### `locales`

**类型** `string[]` · **可选** · **默认值** 区域设置解析顺序

用于独立复数规则的首选 BCP 47 区域设置代码。仅当当前区域设置不是配置的默认值时，才会优先使用这些代码。在 [`<T>`](/docs/vue/reference/components/t) 内，此 prop 会被忽略。

### 默认插槽

**类型** `VNodeChild` · **可选** · **默认值** 空

当提供的具名插槽均不匹配所选形式时渲染的内容。

### 形式插槽

**类型** `VNodeChild` · **可选**

支持以下名称：

* CLDR 类别：`zero`、`one`、`two`、`few`、`many` 和 `other`
* 通用别名：`singular`、`dual` 和 `plural`

仅添加所支持区域设置所需的类别。由于数值覆盖会优先应用，提供 `one` 插槽时，会处理所有绝对值为 `1` 的值；提供 `two` 插槽时，会处理所有绝对值为 `2` 的值，即使该区域设置的 CLDR 类别不同也是如此。其他值则遵循区域设置的类别和后备顺序。

在 [`<T>`](/docs/vue/reference/components/t) 内，形式插槽必须是无条件的、名称静态的且不带作用域。具名插槽的优先级高于同名的静态原始属性。对于简单替代方案，也支持使用静态字符串属性：

```vue
<Plural :n="count" one="One item" other="Several items" />
```

## 示例 [#examples]

```vue title="InboxCount.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>No messages.</template>
    </Plural>
  </T>
</template>
```

对于根据任意值进行选择的情况，请使用 [`<Branch>`](/docs/vue/reference/components/branch)。