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

title: "<Var>"
description: Отображает динамическое значение внутри перевода, не переводя его. Справочник API компонента <Var>.

---

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

## Обзор [#overview]

Оберните значение, которое должно отображаться без изменений, в `<Var>` внутри [`<T>`](/docs/vue/reference/components/t):

```vue
<T>Вас зовут <Var>{{ user.name }}</Var>.</T>
```

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

## Как это работает [#how-it-works]

* **Непрозрачное значение.** Экстрактор записывает placeholder переменной вместо содержимого slot во время выполнения.
* **Стабильная вставка.** Активный форматированный перевод может разместить placeholder там, где этого требует целевой язык, а Vue повторно вставит в это место исходное содержимое slot.
* **Вывод фрагмента.** Компонент не добавляет HTML-обёртку и сохраняет ноль, один или несколько дочерних элементов slot.

`<Var>` намеренно предназначен только для children. Он не принимает пропсы `name` или `value`, а сквозные атрибуты и обработчики событий не применяются к его children.

## Слоты [#slots]

| Слот                       | Описание                                                                        | Тип          | Необязательно | По умолчанию |
| -------------------------- | ------------------------------------------------------------------------------- | ------------ | ------------- | ------------ |
| [`default`](#default-slot) | Содержимое, передаваемое во время выполнения, которое сохраняется без перевода. | `VNodeChild` | Да            | Пусто        |

### Слот по умолчанию

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

Содержимое, отображаемое без изменений. Это может быть текст, интерполяция, элемент или другой компонент.

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

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

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

<template>
  <T>
    Account: <Var>{{ accountName }}</Var>
    <br />
    API key: <Var><code>{{ apiKey }}</code></Var>
  </T>
</template>
```

Для форматирования значений в соответствии с активной локалью используйте [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency) или [`<DateTime>`](/docs/vue/reference/components/datetime).