# vue: <Branch>
URL: https://generaltranslation.com/it/docs/vue/reference/components/branch.mdx
---

title: "<Branch>"
description: Esegue il rendering condizionale dei contenuti in base a un valore. Riferimento API del componente <Branch>.

---

Il componente `<Branch>` converte il valore di `branch` in una stringa e renderizza lo slot con quel nome. Inseriscilo all&#39;interno di [`<T>`](/docs/vue/reference/components/t) quando le relative alternative devono essere tradotte.

## Panoramica [#overview]

Specifica un valore per il branch e slot con nomi statici per i relativi possibili valori:

```vue
<Branch :branch="status">
  <template #active><p>L'account è attivo.</p></template>
  <template #paused><p>L'account è in pausa.</p></template>
  <template #default><p>Lo stato dell'account è sconosciuto.</p></template>
</Branch>
```

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

* **Corrispondenza dei valori.** I valori stringa, numerici e booleani vengono convertiti con `toString()`. Viene renderizzato lo slot denominato corrispondente.
* **Fallback.** Poiché la prop accetta valori booleani, Vue considera un `branch` omesso come `false`; se fornito, viene renderizzato lo slot `false`. Qualsiasi valore senza un branch corrispondente renderizza lo slot predefinito. Il componente non aggiunge alcun wrapper HTML.
* **Estrazione statica.** All&#39;interno di [`<T>`](/docs/vue/reference/components/t), ogni slot denominato supportato viene estratto per la traduzione, mentre il rendering a runtime seleziona solo quello attivo.
* **Precedenza degli slot.** Uno slot denominato ha la precedenza su un attributo primitivo statico con lo stesso nome.

## Props e slot [#props]

| Nome                       | Descrizione                                                      | Tipo                          | Facoltativo | Predefinito |
| -------------------------- | ---------------------------------------------------------------- | ----------------------------- | ----------- | ----------- |
| [`branch`](#branch)        | Valore usato per selezionare un branch denominato.               | `string \| number \| boolean` | Sì          | `false`     |
| [`default`](#default-slot) | Contenuto renderizzato quando nessun branch corrisponde.         | `VNodeChild`                  | Sì          | Vuoto       |
| [`[value]`](#value-slots)  | Contenuto per un singolo valore di branch convertito in stringa. | `VNodeChild`                  | Sì          | —           |

### `branch`

**Tipo** `string | number | boolean` · **Facoltativo** · **Predefinito** `false`

Il valore usato per la selezione. Ad esempio, `true` seleziona uno slot denominato `true` e `2` uno slot denominato `2`. Se la prop viene omessa, il comportamento è equivalente a `:branch="false"`: viene selezionato uno slot denominato `false`, se presente; in caso contrario, viene usato lo slot predefinito.

### Slot predefinito

**Tipo** `VNodeChild` · **Facoltativo** · **Predefinito** Vuoto

Contenuto renderizzato quando nessuno slot di branch né alcun attributo branch supportato corrisponde al valore selezionato.

### Slot di valori

**Tipo** `VNodeChild` · **Facoltativo**

Ogni slot con nome statico rappresenta un possibile valore convertito in stringa. All&#39;interno di [`<T>`](/docs/vue/reference/components/t), gli slot devono essere incondizionati, avere un nome statico e non avere scope; i nomi di slot dinamici e le direttive che modificano la struttura del sorgente non sono supportati.

Gli attributi primitivi statici possono definire semplici branch senza slot:

```vue
<Branch :branch="tone" formal="Welcome" casual="Hi" />
```

Gli slot denominati hanno la precedenza quando entrambe le forme usano lo stesso nome. Gli attributi di presentazione come `class`, `style`, `data-*`, `aria-*` e i listener non sono considerati contenuto del branch.

## Esempi [#examples]

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

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

<template>
  <T>
    <Branch :branch="plan">
      <template #free><p>Upgrade to unlock more features.</p></template>
      <template #pro>
        <p>Thanks for going Pro, <Var>{{ accountName }}</Var>!</p>
      </template>
      <template #default><p>Welcome to your account.</p></template>
    </Branch>
  </T>
</template>
```

Per le regole linguistiche basate sul numero, usa [`<Plural>`](/docs/vue/reference/components/plural).