Vue.Rendering condizionale JS
Vue.JS è una biblioteca facile da apprendere e accessibile che possiamo iniziare a costruire applicazioni Web con la conoscenza di base dello sviluppo web. In vue.JS, gli sviluppatori adorano codificare e sentire la libertà 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 usare uno dei seguenti modi che si adattano al nostro scopo:
- v-show
- v-if
- V-Else
In questo articolo, proveremo queste direttive fornite da Vue.js per il rendering condizionale e capirli in un modo migliore.
v-show
Il v-show nasconde solo l'elemento disabilitando la sua visibilità. Nasconde l'elemento se il valore dell'espressione o della variabile passata non è verità.
Per esempio:
Questo paragrafo non è nascosto
Questo paragrafo è nascosto
v-if
D'altra parte, V-if non nasconde l'elemento, ma non rende inoltre nulla fino a quando il valore dell'espressione o della variabile passata diventa vera.
Per esempio:
Questo è un paragrafo
C'è una funzione aggiuntiva nella direttiva v-if rispetto alla direttiva a V-show. Possiamo applicarlo anche al blocco modello se non vogliamo rendere qualcosa tra quel blocco. O c'è un componente bambino in quello o in molti altri elementi.
Per esempio:
Questa è una voce
Questo è un paragrafo
V-Else
Possiamo anche usare la direttiva V-ELSE insieme all'istruzione V-IFS al fine di rendere condizionale tra uno dei due blocchi. Ma, tenendo presente che il blocco V-Else deve dover apparire subito dopo il blocco V-if.
Per esempio:
Questo paragrafo renderà se 'isvar' diventa vero
Altrimenti, questo paragrafo verrà reso.
Possiamo anche applicare V-ELSE sul blocco del modello.
Questa è una voce
Questo è un paragrafo
v-else-if
Proprio come V-Else, possiamo anche usare la direttiva V-Else-if insieme alla direttiva v-if.
Per esempio:
Auto
Libro
Animale
Nessuno degli Ablove
v-if vs. v-show
Il tipo V-if e V-show fa lo stesso compito. Entrambi nascondono gli elementi nel DOM in base al valore verità o falsy dell'espressione passata, ma con una sottile differenza di nascondere e non rendering elementi.
Se confrontiamo il tempo di tempo e di elaborazione tra questi due. Il V-if costa di più durante il runtime o il trasporto, mentre V-show costa di più all'inizio del rendering. Quindi, sarebbe saggio usare V-show quando attivando. Altrimenti, V-if è preferito.
Avvolgendo
In questo articolo, abbiamo imparato a rendere condizionale il DOM in Vue.JS che utilizza le direttive v-if e v-else. Abbiamo mostrato alcuni esempi e abbiamo 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 tali contenuti utili.