Rendering Condizionale ​

v-if ​

La direttiva v-if viene utilizzata per renderizzare in maniera condizionale un blocco di codice. Il blocco verrà renderizzato solo se l'espressione della direttiva restituisce un valore truthy.

<h1 v-if="awesome">Vue è fantastico!</h1>

v-else ​

Puoi utilizzare la direttiva v-else per indicare un "blocco alternativo" a v-if:

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue è fantastico!</h1>
<h1 v-else>Oh no 😢</h1>

Un elemento v-else deve seguire immediatamente un elemento v-if o un elemento v-else-if, altrimenti non verrà riconosciuto.

v-else-if ​

The v-else-if, come suggerisce il nome, funge da "blocco else if" per v-if. Può anche essere concatenato più volte:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Non è A/B/C
</div>

Simile a v-else, un elemento v-else-if deve seguire immediatamente un elemento v-if o un elemento v-else-if.

v-if con <template> ​

Dato che v-if è una direttiva, deve essere collegato a un singolo elemento. Ma cosa succede se vogliamo mostrare o nascondere più di un elemento? In questo caso possiamo utilizzare v-if su un elemento <template>, che funge da contenitore invisibile. Il risultato finale renderizzato non includerà l'elemento <template>.

<template v-if="ok">
  <h1>Titolo</h1>
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
</template>

anche v-else e v-else-if possono essere usati con il tag <template>.

v-show ​

Un'altra opzione per visualizzare in maniera condizionale un elemento è la direttiva v-show. L'utilizzo è in gran parte lo stesso:

<h1 v-show="ok">Ciao!</h1>

La differenza è che un elemento con v-show sarà sempre renderizzato e rimarrà nel DOM; v-show alterna solamente la proprietà CSS display dell'elemento.

v-show non supporta l'elemento <template>, né funziona con v-else.

v-if vs. v-show ​

v-if è a tutti gli effetti un rendering condizionale "reale" in quanto garantisce che i listener di eventi e i componenti discendenti (child components) all'interno del blocco condizionale vengano correttamente distrutti e ricreati durante gli switch.

v-if è anche lazy: se, al rendering iniziale, la condizione è falsa, non farà nulla: il blocco condizionale non verrà renderizzato finché la condizione non diventa vera per la prima volta.

v-show, in confronto, è molto più semplice: l'elemento viene sempre renderizzato indipendentemente dalla condizione iniziale, con un'alternanza basata su CSS.

In generale, v-if ha costi di attivazione più elevati, mentre v-show ha costi di rendering iniziali più elevati. Quindi scegli v-show se hai bisogno di mostrare/nascondere qualcosa molto spesso, e scegli v-if se è improbabile che la condizione cambi durante l'esecuzione.

v-if con v-for ​

Quando v-if e v-for vengono utilizzati sullo stesso elemento, v-if verrà valutato per primo. Consulta la guida al Rendering delle Liste per i dettagli.