# vue: <Currency>
URL: https://generaltranslation.com/ru/docs/vue/reference/components/currency.mdx
---

title: "<Currency>"
description: Форматирует денежную сумму для активной локали. Справочник API компонента <Currency>.

---

Компонент `<Currency>` форматирует обязательное числовое значение `value` с использованием стиля Currency из `Intl.NumberFormat`. Он изменяет формат отображения, но не конвертирует сумму из одной валюты в другую.

## Обзор [#overview]

Привяжите сумму к `value` и при необходимости выберите код валюты по ISO 4217:

```vue
<Currency :value="100" currency="EUR" />
<!-- en-US: €100.00 -->
```

Используйте его отдельно или в качестве переменной времени выполнения внутри [`<T>`](/docs/vue/reference/components/t).

## Принцип работы [#how-it-works]

* Число форматируется локально в стиле Currency. Сумма не переводится и не отправляется для конвертации валюты.
* Строка должна содержать число целиком. Строки, состоящие только из пробельных символов, и `null` отображаются как пустые; некорректная числовая строка отображается без изменений.
* По умолчанию `currency` имеет значение `USD`. После объединения `options` компонент всегда применяет свой проп верхнего уровня `currency` и стиль Currency, поэтому `options.currency` и `options.style` не могут их переопределить.
* Дочерние элементы слота форматтера игнорируются. Всегда указывайте `value` и используйте самозакрывающийся тег.
* Компонент не добавляет HTML-обёртку.

### Разрешение локалей

Если активная локаль совпадает с настроенной локалью по умолчанию, при форматировании используется только она, а `locales` игнорируется. Для любой другой активной локали автономный форматировщик сначала использует явно заданные `locales`, затем активную локаль и, наконец, локаль по умолчанию.

В [`<T>`](/docs/vue/reference/components/t) для резервного исходного контента используется локаль по умолчанию. Для переведённого контента сначала используется активная локаль, затем локаль по умолчанию, а явно заданный prop `locales` игнорируется.

## Пропсы [#props]

| Пропс                   | Описание                                      | Тип                        | Необязательный | По умолчанию               |
| ----------------------- | --------------------------------------------- | -------------------------- | -------------- | -------------------------- |
| [`value`](#value)       | Сумма валюты для форматирования.              | `number \| string \| null` | Нет            | —                          |
| [`currency`](#currency) | Код валюты по ISO 4217.                       | `string`                   | Да             | `USD`                      |
| [`options`](#options)   | Дополнительные параметры `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Да             | `{}`                       |
| [`locales`](#locales)   | Предпочтительные локали форматирования.       | `string[]`                 | Да             | Порядок разрешения локалей |

### `value`

**Тип** `number | string | null` · **Обязательно**

Полная числовая сумма для форматирования. Числовые строки перед форматированием преобразуются с помощью `Number()`. Значение остаётся в выбранной валюте; обменный курс не применяется.

### `currency`

**Тип** `string` · **Необязательный** · **По умолчанию** `USD`

Код ISO 4217, например `USD`, `EUR` или `JPY`. Этот проп задаёт валюту, даже если в `options` указано другое поле `currency`.

### `options`

**Тип** `Intl.NumberFormatOptions` · **Необязательно** · **По умолчанию** `{}`

Дополнительные параметры, передаваемые в `Intl.NumberFormat`. К распространённым параметрам форматирования валют относятся:

| Параметр                   | Описание                                                          | Тип                                                           | Необязательно | По умолчанию                |
| -------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------- | ------------- | --------------------------- |
| `localeMatcher`            | Алгоритм сопоставления локалей.                                   | `'lookup' \| 'best fit'`                                      | Да            | `'best fit'`                |
| `numberingSystem`          | Система нумерации, например `latn` или `arab`.                    | `string`                                                      | Да            | Зависит от локали           |
| `currencyDisplay`          | Способ отображения валюты.                                        | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`              | Да            | `'symbol'`                  |
| `currencySign`             | Стандартное или бухгалтерское обозначение отрицательных значений. | `'standard' \| 'accounting'`                                  | Да            | `'standard'`                |
| `minimumIntegerDigits`     | Минимальное количество цифр в целой части.                        | `number`                                                      | Да            | `1`                         |
| `minimumFractionDigits`    | Минимальное количество цифр в дробной части.                      | `number`                                                      | Да            | Зависит от валюты           |
| `maximumFractionDigits`    | Максимальное количество цифр в дробной части.                     | `number`                                                      | Да            | Зависит от валюты           |
| `minimumSignificantDigits` | Минимальное количество значащих цифр.                             | `number`                                                      | Да            | `1`                         |
| `maximumSignificantDigits` | Максимальное количество значащих цифр.                            | `number`                                                      | Да            | `21`                        |
| `useGrouping`              | Когда отображать разделители групп разрядов.                      | `boolean \| string`                                           | Да            | Зависит от нотации          |
| `notation`                 | Нотация числа.                                                    | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`    | Да            | `'standard'`                |
| `compactDisplay`           | Длина обозначения в компактной нотации.                           | `'short' \| 'long'`                                           | Да            | `'short'`                   |
| `signDisplay`              | Когда отображать знак.                                            | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'` | Да            | `'auto'`                    |
| `roundingMode`             | Направление округления.                                           | `string`                                                      | Да            | Зависит от среды выполнения |

Компонент принудительно устанавливает `style: 'currency'` и значение `currency` верхнего уровня. Значения по умолчанию для количества дробных цифр определяются стандартными разменными единицами соответствующей валюты. Полный набор параметров, определяемых средой выполнения, см. в [параметрах `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options).

### `locales`

**Тип** `string[]` · **Необязательно** · **По умолчанию** Порядок разрешения локалей

Предпочтительные коды локалей в формате BCP 47 для автономного форматирования. Они проверяются раньше активной локали и локали по умолчанию, но только если активная локаль не является настроенной локалью по умолчанию.

## Примеры [#examples]

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

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

<template>
  <T>
    Your total is
    <Currency
      :value="total"
      currency="EUR"
      :options="{ currencyDisplay: 'code' }"
    />.
  </T>
</template>
```