# vue: 数字和日期的格式化
URL: https://generaltranslation.com/zh/docs/vue/guides/formatting-variables.mdx
---

title: 数字和日期的格式化
description: 如何保留动态值，并根据每个 Vue 区域设置格式化数字、货币和日期。
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

动态值必须与译者可调整顺序的静态文本分开。对于需要原样渲染的值，请使用 [`<Var>`](/docs/vue/reference/components/var)；对于需要遵循区域设置惯例的值，请使用格式化组件。

## 选择合适的组件 [#choose]

* [`<Var>`](/docs/vue/reference/components/var) 可保留运行时值，不会对其进行翻译或格式化。
* [`<Num>`](/docs/vue/reference/components/num) 可格式化数字、百分比和单位。
* [`<Currency>`](/docs/vue/reference/components/currency) 可根据货币代码格式化金额；不会进行货币换算。
* [`<DateTime>`](/docs/vue/reference/components/datetime) 可格式化日历日期、时间，或两者。

这三个格式化组件都需要 `value` prop。与对应的 React 组件不同，它们不会从插槽内容中读取值。

## 使用 `<Var>` 保留值 [#var]

将运行时值置于 [`<Var>`](/docs/vue/reference/components/var) 的默认插槽中：

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

defineProps<{ accountName: string }>();
</script>

<template>
  <T>Welcome back, <Var>{{ accountName }}</Var>!</T>
</template>
```

[`<Var>`](/docs/vue/reference/components/var) 专为仅作为子元素使用而设计。它不接受 React 风格的 `name` 或 `value` 属性。该值不会被翻译，并会在译文引用它的位置重新插入。

可用于用户名、标识符、私密信息，以及其他必须完全按原样显示的值。

## 格式化数字和货币 [#numbers]

通过 `:value` 传递运行时数字。使用 `options` 指定任意 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) 选项：

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

const completion = 0.72;
const total = 1299.5;
</script>

<template>
  <T>
    您的资料已完成
    <Num :value="completion" :options="{ style: 'percent' }" />
    。
  </T>

  <T>
    您的总额为 <Currency :value="total" currency="USD" />。
  </T>
</template>
```

[`<Currency>`](/docs/vue/reference/components/currency) 未指定 `currency` 时默认使用 `USD`。如果金额使用其他货币，请显式设置货币代码。

格式化只会改变显示方式。即使分隔符和货币符号的位置发生变化，`1299.5` 所表示的金额也不变。

## 格式化日期和时间 [#dates]

[`<DateTime>`](/docs/vue/reference/components/datetime) 接受 `Date`、纪元时间戳数字、日期字符串或 `null`。传入 [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) 选项，以指定要显示的字段和时区：

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

const publishedAt = new Date('2026-08-12T17:30:00Z');
</script>

<template>
  <T>
    Published
    <DateTime
      :value="publishedAt"
      :options="{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }"
    />.
  </T>
</template>
```

如果同一时刻必须在服务器端和客户端保持一致的渲染结果，请固定时区。否则，各环境的本地时区可能会导致 hydration 期间的输出不同。

## 控制格式化所用的区域设置 [#locales]

活动的翻译区域设置通常决定格式化方式。独立格式化器可接收按优先级排序的 `locales` 偏好设置：

```vue
<Num :value="total" :locales="['fr-CA', 'fr']" />
```

当活动区域设置不是默认区域设置时，独立格式化器会依次尝试显式指定的 `locales`、活动区域设置和默认区域设置。在默认区域设置下，源内容的格式化使用该默认区域设置，并忽略覆盖设置。

在 [`<T>`](/docs/vue/reference/components/t) 内，富文本翻译流水线负责选择区域设置：源后备内容使用默认区域设置，而翻译后的内容会先使用活动区域设置，再使用默认区域设置。除非该值对外部区域设置有特定要求，否则应优先使用活动区域设置。
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales