# vue: URL: https://generaltranslation.com/es/docs/vue/reference/components/num.mdx --- title: "" description: Formatea un número según la configuración regional activa. Referencia de la API del componente . --- El componente `` formatea un `value` numérico obligatorio con `Intl.NumberFormat`. Úsalo por sí solo o como variable de entorno de ejecución dentro de [``](/docs/vue/reference/components/t). ## Resumen [#overview] Vincula el número mediante `value` y mantén el componente autocerrado: ```vue ``` El formateo se realiza localmente. El valor numérico no se traduce ni se incluye en el texto fuente de la traducción enriquecida. ## Cómo funciona [#how-it-works] * Un número se pasa directamente a `Intl.NumberFormat`. * 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. * Se ignora el contenido de la ranura del formateador. Proporciona siempre `value` y usa una etiqueta autocerrada. * El componente no añade ningún contenedor HTML. ### Resolución de configuración regional Cuando el locale activo coincide con el locale predeterminado, el formateo usa únicamente este último e ignora `locales`. Con cualquier otro locale activo, un formateador independiente prueba primero los `locales` explícitos, luego el locale activo y, por último, el predeterminado. Los locales duplicados se eliminan sin alterar su orden. Dentro de [``](/docs/vue/reference/components/t), la traducción enriquecida controla el formateo: el contenido alternativo de origen usa el locale predeterminado, mientras que el contenido traducido prueba el locale activo y luego el predeterminado. En ese caso, se ignora una prop `locales` explícita. ## Props [#props] | Prop | Descripción | Tipo | Opcional | Predeterminado | | --------------------- | -------------------------------------------- | -------------------------- | -------- | ------------------------------ | | [`value`](#value) | Valor numérico que se va a formatear. | `number \| string \| null` | No | — | | [`options`](#options) | Opciones que se pasan a `Intl.NumberFormat`. | `Intl.NumberFormatOptions` | Sí | `{}` | | [`locales`](#locales) | Locales de formato preferidos. | `string[]` | Sí | Orden de resolución de locales | ### `value` **Tipo** `number | string | null` · **Obligatorio** El valor numérico completo que se va a formatear. Las cadenas numéricas se convierten con `Number()` antes de formatearlas. Los valores como `"12 items"` o `"1,234.5"` no se analizan de forma parcial y se muestran sin cambios. ```vue ``` ### `options` **Tipo** `Intl.NumberFormatOptions` · **Opcional** · **Predeterminado** `{}` Opciones que se pasan a la implementación de `Intl.NumberFormat` del entorno de ejecución de JavaScript. Entre las opciones habituales se incluyen: | Opción | Descripción | Tipo | Opcional | Predeterminado | | -------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------- | ------------------------------------ | | `localeMatcher` | Algoritmo de coincidencia de configuraciones regionales. | `'lookup' \| 'best fit'` | Sí | `'best fit'` | | `numberingSystem` | Sistema de numeración, como `latn` o `arab`. | `string` | Sí | Depende de la configuración regional | | `style` | Formato decimal, porcentual, de divisa o de unidad. | `'decimal' \| 'percent' \| 'currency' \| 'unit'` | Sí | `'decimal'` | | `currency` | Código ISO 4217 obligatorio para el estilo de divisa. | `string` | Sí | — | | `currencyDisplay` | Cómo se muestra una divisa. | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'` | Sí | `'symbol'` | | `unit` | Identificador de unidad obligatorio para el estilo de unidad, como `kilometer`. | `string` | Sí | — | | `unitDisplay` | Longitud de la etiqueta de unidad. | `'long' \| 'short' \| 'narrow'` | Sí | `'short'` | | `minimumIntegerDigits` | Número mínimo de dígitos enteros. | `number` | Sí | `1` | | `minimumFractionDigits` | Número mínimo de dígitos fraccionarios. | `number` | Sí | Depende del estilo | | `maximumFractionDigits` | Número máximo de dígitos fraccionarios. | `number` | Sí | Depende del estilo | | `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 que se utiliza al redondear. | `string` | Sí | Depende del entorno de ejecución | Los valores predeterminados de los dígitos fraccionarios dependen del `style` seleccionado. Los campos y valores compatibles también pueden variar según el entorno de ejecución de JavaScript. Consulta las [opciones de `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) para ver el conjunto completo definido por el entorno de ejecución. ### `locales` **Tipo** `string[]` · **Opcional** · **Predeterminado** Orden de resolución de locales Códigos BCP 47 de locale preferidos para el formateo independiente. Solo se prueban antes que los locales activo y predeterminado cuando el locale activo no es el predeterminado configurado. ```vue ``` ## Ejemplos [#examples] ```vue title="InventorySummary.vue" ```