Direttiva v-show in Vue
Un'altra opzione per la visualizzazione condizionale
è la direttiva v-show.
Si utilizza in modo molto simile:
<template>
<p v-show="isAuth">
+++
</p>
</template>
La differenza è che l'elemento con v-show sarà sempre
renderizzato e rimarrà nel DOM, e verrà alternata
solo la sua proprietà CSS display.
La direttiva v-if esegue un rendering condizionale
"vero", poiché garantisce
che gli ascoltatori di eventi e i componenti figli
all'interno del blocco vengano distrutti
e ricreati correttamente durante l'alternanza delle condizioni.
La direttiva v-if è anche pigra (lazy): se la condizione
è falsa al momento del rendering iniziale,
allora non farà nulla - il blocco condizionale
non verrà renderizzato fino a quando
la condizione non diventa vera.
In confronto, v-show è molto più semplice - l'elemento
viene sempre renderizzato, indipendentemente dallo
stato iniziale, con alternanza basata sul CSS.
In generale, v-if ha costi di alternanza più alti,
mentre v-show ha costi di rendering iniziale
maggiori. Quindi, usa v-show
se le alternanze sono frequenti,
e preferisci v-if se la condizione
potrebbe non cambiare durante l'esecuzione.
La direttiva v-show non può essere utilizzata sull'elemento
template e non funziona con v-else.
Sono dati un paragrafo e un pulsante. Fai in modo che il paragrafo venga mostrato/nascosto (toggle) alla pressione del pulsante.
Spiegate le differenze tra le direttive
v-show e v-if.
Spiegate quando è meglio usare
la direttiva v-show e quando - v-if.
Spiegate quali limitazioni
ha la direttiva v-show.
