# vue: <Var>
URL: https://generaltranslation.com/zh/docs/vue/reference/components/var.mdx
---
title: "<Var>"
description: 在翻译中渲染动态值，且不翻译该值。<Var> 组件的 API 参考。

---

`<Var>` 组件会将其默认插槽内容标记为一个不透明的运行时值。周围的富文本翻译可以移动该值，而无需将其内容送去翻译。

## 概述 [#overview]

将 `<Var>` 放在 [`<T>`](/docs/vue/reference/components/t) 内，包裹应原样渲染的值：

```vue
<T>你的名字是 <Var>{{ user.name }}</Var>。</T>
```

使用格式化组件，以符合区域设置的方式显示数字、货币和日期。

## 工作原理 [#how-it-works]

* **不透明值。** 提取器记录变量占位符，而非插槽在运行时的内容。
* **稳定插入。** 活跃的富文本翻译可根据目标语言的需要将占位符置于任意位置，Vue 会在该位置重新插入原始插槽内容。
* **片段输出。** 该组件不添加 HTML 包装元素，并保留零个、一个或多个插槽子元素。

`<Var>` 被设计为只能作为子元素使用。它不接受 `name` 或 `value` 属性，透传属性和监听器也不会应用到其子元素上。

## 插槽 [#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)。