# vue: Форматирование чисел и дат
URL: https://generaltranslation.com/ru/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) форматирует календарную дату, время или и то и другое.

Все три компонента форматирования требуют prop `value`. В отличие от компонентов 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) намеренно поддерживает только дочернее содержимое. Он не принимает пропсы `name` или `value`, как в React. Значение исключается из перевода и повторно вставляется везде, где на него ссылается переведённая фраза.

Используйте его для имён пользователей, идентификаторов, конфиденциальной информации и других значений, которые должны отображаться точно в переданном виде.

## Форматирование чисел и валют [#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>
    Your profile is
    <Num :value="completion" :options="{ style: 'percent' }" />
    complete.
  </T>

  <T>
    Your total is <Currency :value="total" currency="USD" />.
  </T>
</template>
```

[`<Currency>`](/docs/vue/reference/components/currency) по умолчанию использует `USD`, если параметр `currency` не указан. Явно укажите код, если сумма выражена в другой валюте.

Форматирование меняет только отображение. Значение `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>
    Опубликовано
    <DateTime
      :value="publishedAt"
      :options="{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }"
    />.
  </T>
</template>
```

Фиксируйте часовой пояс, если один и тот же момент времени должен отображаться одинаково на сервере и клиенте. Иначе локальные часовые пояса этих сред могут привести к разному результату при гидратации.

## Управление локалями форматирования [#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