Vue.js è una libreria facile da imparare e accessibile con cui possiamo iniziare a creare applicazioni web con le conoscenze di base dello sviluppo web. In Vue.js, gli sviluppatori amano programmare e sentirsi liberi durante lo sviluppo di applicazioni.

In qualsiasi applicazione web dinamica, il rendering condizionale è una parte necessaria. Vue.js fornisce diversi modi per il rendering condizionale e possiamo utilizzare uno dei seguenti modi adatto al nostro scopo:

• v-show
• v-se
• v-else

In questo articolo proveremo queste direttive fornite da Vue.js per il rendering condizionale e comprenderli in modo migliore.

v-show

Il v-show nasconde l'elemento solo disabilitandone la visibilità. Nasconde l'elemento se il valore dell'espressione o della variabile passata non è veritiero.

Per esempio:

Questo paragrafo non è nascosto

Questo paragrafo è nascosto

v-se

D'altra parte, v-if non nasconde l'elemento, ma non rende nulla fino a quando il valore dell'espressione o della variabile passata diventa vero.

Per esempio:

C'è una funzionalità aggiuntiva nella direttiva v-if rispetto alla direttiva v-show. Possiamo applicarlo anche al blocco modello se non vogliamo rendere nulla tra quel blocco. O c'è un componente figlio in quello o molti altri elementi.

Per esempio:

v-else

Possiamo anche usare la direttiva v-else insieme all'istruzione v-if per eseguire il rendering condizionalmente tra uno qualsiasi dei due blocchi. Ma, tenendo presente che il blocco v-else deve apparire subito dopo il blocco v-if.

Per esempio:

Questo paragrafo verrà visualizzato se 'isVar' diventa vero

Altrimenti, questo paragrafo verrà reso.

Possiamo applicare v-else anche al blocco modello.

v-else-se

Proprio come v-else, possiamo anche usare la direttiva v-else-if insieme alla direttiva v-if.

Per esempio:

v-se vs. v-show

Il tipo v-if e v-show fanno lo stesso compito. Entrambi nascondono gli elementi nel DOM in base al valore vero o falso dell'espressione passata, ma con una sottile differenza di nascondere e non rendere gli elementi.

Se confrontiamo il tempo e il costo di elaborazione tra questi due. Il v-if costa di più durante l'esecuzione o l'attivazione/disattivazione, mentre v-show costa di più all'inizio del rendering. Quindi, sarebbe saggio usare v-show quando l'attivazione/disattivazione è lo scopo. In caso contrario, si preferisce v-if.

Avvolgendo

In questo articolo, abbiamo imparato come eseguire il rendering condizionale del DOM in Vue.js usando le direttive v-if e v-else. Abbiamo mostrato alcuni esempi e appreso la vera differenza tra v-show e v-if direttiva. Se questo articolo ti aiuta ad avere una migliore comprensione e concetti, continua a visitare linuxhint.com per contenuti così utili.