# Vue: `<Currency>`
URL: https://generaltranslation.com/es/docs/vue/reference/components/currency.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Formatea un importe en una Currency según la configuración regional activa. Referencia de la API del componente `<Currency>`.

El componente `<Currency>` formatea un `value` numérico obligatorio con el estilo de Currency de `Intl.NumberFormat`. Cambia el formato de visualización, pero no convierte importes entre Currency.

## Resumen [#overview]

Vincula el importe mediante `value` y selecciona opcionalmente un código Currency ISO 4217:

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

Úsala por sí sola o como variable de tiempo de ejecución dentro de [`<T>`](/docs/vue/reference/components/t).

## Cómo funciona [#how-it-works]

* Un número se formatea localmente con el estilo de Currency. El importe no se traduce ni se envía para su conversión de Currency.
* Una cadena debe representar un número completo. Las cadenas que solo contienen espacios en blanco y `null` se muestran vacías; una cadena numérica no válida se muestra sin cambios.
* `currency` usa `USD` de forma predeterminada. El componente siempre aplica su prop `currency` de nivel superior y el estilo de Currency después de combinar `options`, por lo que `options.currency` y `options.style` no pueden reemplazarlos.
* Se ignoran los elementos secundarios de la ranura del formateador. Proporciona siempre `value` y usa una etiqueta de cierre automático.
* El componente no añade ningún contenedor HTML.

### Resolución de configuración regional

Cuando la configuración regional activa es la configuración regional predeterminada configurada, el formateo usa únicamente esta e ignora `locales`. Con cualquier otra configuración regional activa, un formateador independiente prueba primero las `locales` explícitas, luego la configuración regional activa y, por último, la configuración regional predeterminada.

Dentro de [`<T>`](/docs/vue/reference/components/t), el contenido alternativo de origen usa la configuración regional predeterminada. El contenido traducido prueba la configuración regional activa y luego la predeterminada, e ignora una prop `locales` explícita.

## Props [#props]

| Prop                    | Descripción                                       | Tipo                       | Opcional | Predeterminado                                    |
| ----------------------- | ------------------------------------------------- | -------------------------- | -------- | ------------------------------------------------- |
| [`value`](#value)       | Importe de Currency que se va a formatear.          | `number \| string \| null` | No       | —                                                 |
| [`currency`](#currency) | Código de Currency ISO 4217.                        | `string`                   | Sí       | `USD`                                             |
| [`options`](#options)   | Opciones adicionales de `Intl.NumberFormat`.      | `Intl.NumberFormatOptions` | Sí       | `{}`                                              |
| [`locales`](#locales)   | Configuraciones regionales de formato preferidas. | `string[]`                 | Sí       | Orden de resolución de configuraciones regionales |

### `value`

**Tipo** `number | string | null` · **Obligatorio**

El importe numérico completo que se debe formatear. Las cadenas numéricas se convierten con `Number()` antes de formatearse. El valor permanece en la Currency seleccionada; no se aplica ningún tipo de cambio.

### `currency`

**Tipo** `string` · **Opcional** · **Predeterminado** `USD`

Un código ISO 4217 como `USD`, `EUR` o `JPY`. Esta prop determina la Currency incluso si `options` incluye un campo `currency` distinto.

### `options`

**Tipo** `Intl.NumberFormatOptions` · **Opcional** · **Predeterminado** `{}`

Opciones adicionales que se pasan a `Intl.NumberFormat`. Entre las opciones habituales para dar formato a Currency se incluyen:

| Opción                     | Descripción                                                                                                    | Tipo                                                                                                                 | Opcional | Predeterminado                       |
| -------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------ |
| `localeMatcher`            | Algoritmo de coincidencia de configuración regional.                                                           | `'lookup' \| 'best fit'`                                                                                             | Sí       | `'best fit'`                         |
| `numberingSystem`          | Sistema de numeración, como `latn` o `arab`.                                                                   | `string`                                                                                                             | Sí       | Depende de la configuración regional |
| `currencyDisplay`          | Cómo se muestra la Currency.                                                                                   | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | Sí       | `'symbol'`                           |
| `currencySign`             | Notación estándar o contable para valores negativos.                                                           | `'standard' \| 'accounting'`                                                                                         | Sí       | `'standard'`                         |
| `minimumIntegerDigits`     | Número mínimo de dígitos enteros.                                                                              | `number`                                                                                                             | Sí       | `1`                                  |
| `minimumFractionDigits`    | Número mínimo de dígitos fraccionarios.                                                                        | `number`                                                                                                             | Sí       | Depende de la Currency               |
| `maximumFractionDigits`    | Número máximo de dígitos fraccionarios.                                                                        | `number`                                                                                                             | Sí       | Depende de la Currency               |
| `minimumSignificantDigits` | Número mínimo de dígitos significativos.                                                                       | `number`                                                                                                             | Sí       | `1`                                  |
| `maximumSignificantDigits` | Número máximo de dígitos significativos.                                                                       | `number`                                                                                                             | Sí       | `21`                                 |
| `useGrouping`              | Cuándo mostrar separadores de agrupación.                                                                      | `boolean \| 'auto' \| 'always' \| 'min2'`                                                                            | Sí       | Depende de la notación               |
| `notation`                 | Notación numérica.                                                                                             | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Sí       | `'standard'`                         |
| `compactDisplay`           | Longitud de la etiqueta de notación compacta.                                                                  | `'short' \| 'long'`                                                                                                  | Sí       | `'short'`                            |
| `signDisplay`              | Cuándo mostrar un signo.                                                                                       | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Sí       | `'auto'`                             |
| `roundingMode`             | Dirección de redondeo.                                                                                         | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Sí       | `'halfExpand'`                       |
| `roundingPriority`         | Resuelve conflictos entre los ajustes de dígitos fraccionarios y significativos.                               | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Sí       | `'auto'`                             |
| `roundingIncrement`        | Redondea a `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500` o `5000`. | `number`                                                                                                             | Sí       | `1`                                  |
| `trailingZeroDisplay`      | Controla los ceros finales en valores enteros.                                                                 | `'auto' \| 'stripIfInteger'`                                                                                         | Sí       | `'auto'`                             |

El componente fuerza `style: 'currency'` y el valor `currency` de nivel superior. Los valores predeterminados de los dígitos fraccionarios siguen las unidades menores estándar de la Currency correspondiente. Consulta las [opciones de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) para conocer el conjunto completo de opciones definido por el entorno de ejecución.

### `locales`

**Tipo** `string[]` · **Opcional** · **Predeterminado** Orden de resolución de la configuración regional

Códigos de configuración regional BCP 47 preferidos para el formateo independiente. Se prueban antes que las configuraciones regionales activa y predeterminada, solo si la configuración regional activa no es la predeterminada configurada.

## Ejemplos [#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.
