# Vue: `<Num>`
URL: https://generaltranslation.com/it/docs/vue/reference/components/num.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Formatta un numero in base all'impostazione regionale attiva. Riferimento API del componente `<Num>`.

Il componente `<Num>` formatta un `value` numerico obbligatorio con `Intl.NumberFormat`. Usalo da solo o come variabile a runtime all&#39;interno di [`<T>`](/docs/vue/reference/components/t).

## Panoramica [#overview]

Associa il numero a `value` e mantieni il componente autochiudente:

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

La formattazione avviene localmente. Il valore numerico non viene tradotto né incluso nel testo sorgente per la traduzione.

## Come funziona [#how-it-works]

* Un numero viene passato direttamente a `Intl.NumberFormat`.
* Una stringa deve rappresentare un numero completo. Le stringhe contenenti solo spazi e `null` renderizzano un valore vuoto; una stringa numerica non valida viene renderizzata senza modifiche.
* Il contenuto figlio dello slot del formattatore viene ignorato. Fornisci sempre `value` e usa un tag autochiudente.
* Il componente non aggiunge alcun wrapper HTML.

### Risoluzione dell&#39;impostazione regionale

Quando l&#39;impostazione regionale attiva è quella predefinita configurata, la formattazione usa solo quest&#39;ultima e ignora `locales`. Per qualsiasi altra impostazione regionale attiva, un formattatore autonomo prova prima i `locales` espliciti, poi l&#39;impostazione regionale attiva e infine quella predefinita. Le impostazioni regionali duplicate vengono rimosse senza modificarne l&#39;ordine.

All&#39;interno di [`<T>`](/docs/vue/reference/components/t), la traduzione rich controlla la formattazione: il contenuto fallback sorgente usa l&#39;impostazione regionale predefinita, mentre il contenuto tradotto prova l&#39;impostazione regionale attiva e poi quella predefinita. In tal caso, una prop `locales` esplicita viene ignorata.

## Props [#props]

| Prop                  | Descrizione                                            | Tipo                       | Facoltativo | Predefinito                                        |
| --------------------- | ------------------------------------------------------ | -------------------------- | ----------- | -------------------------------------------------- |
| [`value`](#value)     | Valore numerico da formattare.                         | `number \| string \| null` | No          | —                                                  |
| [`options`](#options) | Opzioni passate a `Intl.NumberFormat`.                 | `Intl.NumberFormatOptions` | Sì          | `{}`                                               |
| [`locales`](#locales) | Impostazioni regionali preferite per la formattazione. | `string[]`                 | Sì          | Ordine di risoluzione delle impostazioni regionali |

### `value`

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

Il valore numerico completo da formattare. Le stringhe numeriche vengono convertite con `Number()` prima della formattazione. Valori come `"12 items"` o `"1,234.5"` non vengono analizzati parzialmente e vengono renderizzati senza modifiche.

```vue
<Num :value="item.quantity" />
```

### `options`

**Tipo** `Intl.NumberFormatOptions` · **Facoltativo** · **Predefinito** `{}`

Opzioni passate all&#39;implementazione di `Intl.NumberFormat` del runtime JavaScript. Le opzioni più comuni includono:

| Opzione                    | Descrizione                                                                                                     | Tipo                                                                                                                 | Facoltativo | Predefinito                                |
| -------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------ |
| `localeMatcher`            | Algoritmo di corrispondenza dell&#39;impostazione regionale.                                                    | `'lookup' \| 'best fit'`                                                                                             | Sì          | `'best fit'`                               |
| `numberingSystem`          | Sistema di numerazione, ad esempio `latn` o `arab`.                                                             | `string`                                                                                                             | Sì          | Dipendente dall&#39;impostazione regionale |
| `style`                    | Formattazione decimale, percentuale, di valuta o di unità.                                                      | `'decimal' \| 'percent' \| 'currency' \| 'unit'`                                                                     | Sì          | `'decimal'`                                |
| `currency`                 | Codice ISO 4217 richiesto dallo stile di valuta.                                                                | `string`                                                                                                             | Sì          | —                                          |
| `currencyDisplay`          | Modalità di visualizzazione della valuta.                                                                       | `'code' \| 'symbol' \| 'narrowSymbol' \| 'name'`                                                                     | Sì          | `'symbol'`                                 |
| `currencySign`             | Notazione standard o contabile per i valori di valuta negativi.                                                 | `'standard' \| 'accounting'`                                                                                         | Sì          | `'standard'`                               |
| `unit`                     | Identificatore di unità richiesto dallo stile di unità, ad esempio `kilometer`.                                 | `string`                                                                                                             | Sì          | —                                          |
| `unitDisplay`              | Larghezza dell&#39;etichetta dell&#39;unità.                                                                    | `'long' \| 'short' \| 'narrow'`                                                                                      | Sì          | `'short'`                                  |
| `minimumIntegerDigits`     | Numero minimo di cifre intere.                                                                                  | `number`                                                                                                             | Sì          | `1`                                        |
| `minimumFractionDigits`    | Numero minimo di cifre frazionarie.                                                                             | `number`                                                                                                             | Sì          | Dipendente dallo stile                     |
| `maximumFractionDigits`    | Numero massimo di cifre frazionarie.                                                                            | `number`                                                                                                             | Sì          | Dipendente dallo stile                     |
| `minimumSignificantDigits` | Numero minimo di cifre significative.                                                                           | `number`                                                                                                             | Sì          | `1`                                        |
| `maximumSignificantDigits` | Numero massimo di cifre significative.                                                                          | `number`                                                                                                             | Sì          | `21`                                       |
| `useGrouping`              | Quando visualizzare i separatori di raggruppamento.                                                             | `boolean \| 'auto' \| 'always' \| 'min2'`                                                                            | Sì          | Dipendente dalla notazione                 |
| `notation`                 | Notazione numerica.                                                                                             | `'standard' \| 'scientific' \| 'engineering' \| 'compact'`                                                           | Sì          | `'standard'`                               |
| `compactDisplay`           | Larghezza dell&#39;etichetta della notazione compatta.                                                          | `'short' \| 'long'`                                                                                                  | Sì          | `'short'`                                  |
| `signDisplay`              | Quando visualizzare un segno.                                                                                   | `'auto' \| 'always' \| 'exceptZero' \| 'negative' \| 'never'`                                                        | Sì          | `'auto'`                                   |
| `roundingMode`             | Direzione usata per l&#39;arrotondamento.                                                                       | `'ceil' \| 'floor' \| 'expand' \| 'trunc' \| 'halfCeil' \| 'halfFloor' \| 'halfExpand' \| 'halfTrunc' \| 'halfEven'` | Sì          | `'halfExpand'`                             |
| `roundingPriority`         | Risolve i conflitti tra le impostazioni delle cifre frazionarie e quelle delle cifre significative.             | `'auto' \| 'morePrecision' \| 'lessPrecision'`                                                                       | Sì          | `'auto'`                                   |
| `roundingIncrement`        | Arrotonda a `1`, `2`, `5`, `10`, `20`, `25`, `50`, `100`, `200`, `250`, `500`, `1000`, `2000`, `2500` o `5000`. | `number`                                                                                                             | Sì          | `1`                                        |
| `trailingZeroDisplay`      | Controlla gli zeri finali sui valori interi.                                                                    | `'auto' \| 'stripIfInteger'`                                                                                         | Sì          | `'auto'`                                   |

I valori predefiniti per le cifre frazionarie dipendono dallo `style` selezionato. I campi e i valori supportati possono inoltre variare in base al runtime JavaScript. Consulta le [opzioni di `Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options) per l&#39;insieme completo definito dal runtime.

### `locales`

**Tipo** `string[]` · **Facoltativo** · **Predefinito** Ordine di risoluzione delle impostazioni regionali

Codici locale BCP 47 preferiti per la formattazione autonoma. Vengono utilizzati prima dell&#39;impostazione regionale attiva e di quella predefinita solo se l&#39;impostazione regionale attiva non corrisponde a quella predefinita configurata.

```vue
<Num :value="1234.5" :locales="['de-DE']" />
```

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