# vue: Formattazione di numeri e date
URL: https://generaltranslation.com/it/docs/vue/guides/formatting-variables.mdx
---

title: Formattazione di numeri e date
description: Come preservare i valori dinamici e formattare numeri, valute e date per ogni impostazione regionale di Vue.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

I valori dinamici devono rimanere separati dal testo statico, che i traduttori possono riordinare. Usa [`<Var>`](/docs/vue/reference/components/var) per i valori che devono essere renderizzati senza modifiche e i componenti di formattazione per quelli che devono rispettare le convenzioni dell&#39;impostazione regionale.

## Scegli il componente giusto [#choose]

* [`<Var>`](/docs/vue/reference/components/var) mantiene un valore di runtime senza tradurlo né formattarlo.
* [`<Num>`](/docs/vue/reference/components/num) formatta numeri, percentuali e unità.
* [`<Currency>`](/docs/vue/reference/components/currency) formatta un importo con un codice valuta; non effettua conversioni.
* [`<DateTime>`](/docs/vue/reference/components/datetime) formatta una data di calendario, un&#39;ora o entrambi.

Tutti e tre i componenti di formattazione richiedono una prop `value`. A differenza delle controparti React, non leggono il valore dal contenuto dello slot.

## Conserva un valore con `<Var>` [#var]

Inserisci il valore di runtime nello slot predefinito di [`<Var>`](/docs/vue/reference/components/var):

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

defineProps<{ accountName: string }>();
</script>

<template>
  <T>Welcome back, <Var>{{ accountName }}</Var>!</T>
</template>
```

[`<Var>`](/docs/vue/reference/components/var) è progettato per essere usato solo come child. Non accetta props `name` o `value` in stile React. Il valore viene escluso dalla traduzione e reinserito ovunque venga citato nella frase tradotta.

Usalo per nomi utente, identificatori, informazioni private e altri valori che devono essere visualizzati esattamente come forniti.

## Formattare numeri e valute [#numbers]

Passa il numero a runtime tramite `:value`. Usa `options` per specificare qualsiasi opzione di [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat):

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

const completion = 0.72;
const total = 1299.5;
</script>

<template>
  <T>
    Il tuo profilo è completo al
    <Num :value="completion" :options="{ style: 'percent' }" />
    .
  </T>

  <T>
    Il totale è <Currency :value="total" currency="USD" />.
  </T>
</template>
```

[`<Currency>`](/docs/vue/reference/components/currency) usa `USD` per impostazione predefinita se `currency` viene omesso. Specifica esplicitamente il codice quando l&#39;importo è in un&#39;altra valuta.

La formattazione modifica solo la presentazione. Un valore di `1299.5` rimane lo stesso importo anche se cambiano i separatori e la posizione della valuta.

## Formattare date e orari [#dates]

[`<DateTime>`](/docs/vue/reference/components/datetime) accetta un oggetto `Date`, un numero epoch, una stringa di data o `null`. Passa le opzioni di [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) per scegliere i campi da visualizzare e il fuso orario:

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

const publishedAt = new Date('2026-08-12T17:30:00Z');
</script>

<template>
  <T>
    Pubblicato il
    <DateTime
      :value="publishedAt"
      :options="{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }"
    />.
  </T>
</template>
```

Imposta il fuso orario quando lo stesso istante deve essere renderizzato in modo coerente sul server e sul client. Altrimenti, il fuso orario locale di ciascun ambiente può produrre un output diverso durante l&#39;idratazione.

## Controllare le impostazioni regionali di formattazione [#locales]

L&#39;impostazione regionale attiva per la traduzione controlla normalmente la formattazione. Un formattatore autonomo può ricevere un elenco ordinato di preferenze `locales`:

```vue
<Num :value="total" :locales="['fr-CA', 'fr']" />
```

Quando l&#39;impostazione regionale attiva non è quella predefinita, un formattatore autonomo prova prima le `locales` esplicite, poi l&#39;impostazione regionale attiva e infine quella predefinita. Per l&#39;impostazione regionale predefinita, la formattazione del sorgente usa quest&#39;ultima e ignora l&#39;override.

All&#39;interno di [`<T>`](/docs/vue/reference/components/t), la pipeline di traduzione avanzata gestisce la selezione dell&#39;impostazione regionale: il contenuto sorgente di fallback usa l&#39;impostazione regionale predefinita, mentre il contenuto tradotto usa prima quella attiva e poi quella predefinita. Preferisci l&#39;impostazione regionale attiva, salvo requisiti esterni specifici per il valore.
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales