# Vue: `<Currency>`
URL: https://generaltranslation.com/ru/docs/vue/reference/components/currency.mdx
Docs index: https://generaltranslation.com/llms.txt
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 \| 'auto' \| 'always' \| 'min2'`                                                                            | Да            | Зависит от нотации |
| `notation`                 | Нотация числа.                                                                                                     | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Да            | `'standard'`       |
| `compactDisplay`           | Длина обозначения в компактной нотации.                                                                            | `'short' \| 'long'`                                                                                                  | Да            | `'short'`          |
| `signDisplay`              | Когда отображать знак.                                                                                             | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Да            | `'auto'`           |
| `roundingMode`             | Направление округления.                                                                                            | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Да            | `'halfExpand'`     |
| `roundingPriority`         | Разрешает конфликты между настройками дробных и значащих цифр.                                                     | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Да            | `'auto'`           |
| `roundingIncrement`        | Округляет до `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500` или `5000`. | `number`                                                                                                             | Да            | `1`                |
| `trailingZeroDisplay`      | Управляет отображением нулей в дробной части у целых значений.                                                     | `'auto' \| 'stripIfInteger'`                                                                                         | Да            | `'auto'`           |

Компонент принудительно устанавливает `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>
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.