# vue: URL: https://generaltranslation.com/es/docs/vue/reference/components/currency.mdx --- title: "" description: Formatea un importe en una Currency según la configuración regional activa. Referencia de la API del componente . --- El componente `` 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 ``` Úsala por sí sola o como variable de tiempo de ejecución dentro de [``](/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 [``](/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 \| string` | 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. | `string` | Sí | Depende del entorno de ejecución | 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" ```