Vue.JS betinget gjengivelse
Vue.JS er et lett å lære og tilgjengelig bibliotek som vi kan begynne å bygge webapplikasjoner i det med grunnleggende kunnskap om webutvikling. I vue.JS, utviklere elsker å kode og føle frihet mens de utvikler applikasjoner.
I enhver dynamisk webapplikasjon er betinget gjengivelse en nødvendig del. Vue.JS gir forskjellige måter for betinget gjengivelse, og vi kan bruke noen av følgende måter som passer vårt formål:
- V-show
- v-if
- V-else
I denne artikkelen vil vi prøve disse direktivene levert av Vue.JS for betinget gjengivelse og forstå dem på en bedre måte.
V-show
V-showet skjuler bare elementet ved å deaktivere synligheten. Det skjuler elementet hvis verdien av det passerte uttrykket eller variabelen ikke er sannsynlighet.
For eksempel:
Dette avsnittet er ikke skjult
Dette avsnittet er skjult
v-if
På den annen side skjuler V-IF ikke elementet, men det gjengir heller ikke noe før verdien av det passerte uttrykket eller variabelen blir sant.
For eksempel:
Dette er et avsnitt
Det er en tilleggsfunksjon i V-IF-direktivet sammenlignet med V-show-direktivet. Vi kan bruke den på malblokken også hvis vi ikke vil gjengi noe i mellom blokken. Enten er det en barnekomponent i det eller mange andre elementer.
For eksempel:
Dette er en overskrift
Dette er et avsnitt
V-else
Vi kan også bruke V-Else-direktivet sammen med V-IF-setningen for å være betinget av å gjengi mellom noen av de to blokkene. Men å huske på at V-Else-blokken må vises rett etter V-IF-blokken.
For eksempel:
Dette avsnittet vil gjengi hvis 'isvar' blir sant
Ellers vil dette avsnittet bli gjengitt.
Vi kan også bruke V-Else på malblokken.
Dette er en overskrift
Dette er et avsnitt
v-elv-hvis
Akkurat som V-Else, kan vi også bruke V-Else-IF-direktivet sammen med V-IF-direktivet.
For eksempel:
Bil
Bok
Dyr
Ingen av ablove
V-hvis vs. V-show
V-IF og V-showet gjør den samme oppgaven. De skjuler begge elementene i DOM basert på sannheten eller falske verdien av det passerte uttrykket, men med en subtil forskjell i skjul og ikke gjengir elementer.
Hvis vi sammenligner tid og behandlingskostnad mellom disse to. V-IF koster mer under kjøretid eller veksling, mens V-show koster mer ved starten av gjengivelsen. Så det ville være lurt å bruke V-show når du bytter er formål. Ellers er V-IF foretrukket.
Innpakning
I denne artikkelen har vi lært hvordan vi betinget å gjengi DOM i Vue.JS ved hjelp av V-IF og V-Else-direktiver. Vi har vist noen eksempler og lært om den virkelige forskjellen mellom V-show og V-IF-direktiv. Hvis denne artikkelen hjelper deg å ha en bedre forståelse og konsepter, fortsett å besøke Linuxhint.com for så nyttig innhold.