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

El componente `<Num>` formatea un `value` numérico obligatorio con `Intl.NumberFormat`. Úsalo por sí solo o como variable de entorno de ejecución dentro de [`<T>`](/docs/vue/reference/components/t).

## Resumen [#overview]

Vincula el número mediante `value` y mantén el componente autocerrado:

```vue
<Num :value="1234.5" />
<!-- en-US: 1,234.5 -->
```

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 [`<T>`](/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
<Num :value="item.quantity" />
```

### `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'`                           |
| `currencySign`             | Notación estándar o contable para valores monetarios negativos.                                                | `'standard' \| 'accounting'`                                                                                         | Sí       | `'standard'`                         |
| `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 \| '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 que se utiliza al redondear.                                                                         | `'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'`                             |

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
<Num :value="1234.5" :locales="['de-DE']" />
```

## Ejemplos [#examples]

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

defineProps<{ count: number; completionRate: number }>();
</script>

<template>
  <T>There are <Num :value="count" /> units available.</T>
  <p><Num :value="completionRate" :options="{ style: 'percent' }" /> complete</p>
</template>
```

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.