Vue.js er et lettlært 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 en av følgende måter som passer vårt formål:

• v-show
• v-if
• v-annet

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 sann.

For eksempel:

Dette avsnittet er ikke skjult

Dette avsnittet er skjult

v-if

På den annen side skjuler ikke v-if elementet, men det gjengir heller ikke noe før verdien til det passerte uttrykket eller variabelen blir sant.

For eksempel:

Det er en tilleggsfunksjon i v-if-direktivet sammenlignet med v-show-direktivet. Vi kan også bruke den til malblokken hvis vi ikke vil gjengi noe mellom den blokken. Enten er det en barnekomponent i det eller mange andre elementer.

For eksempel:

v-annet

Vi kan også bruke v-else-direktivet sammen med v-if-setningen for å betinget gjengi mellom noen av de to blokkene. Men med tanke på at v-else-blokken må vises rett etter v-if-blokken.

For eksempel:

Dette avsnittet gjengis hvis 'isVar' blir sant

Ellers blir dette avsnittet gjengitt.

Vi kan også bruke v-annet på malblokken.

v-annet-hvis

Akkurat som v-annet, kan vi også bruke v-annet-hvis-direktivet sammen med v-hvis-direktivet.

For eksempel:

v-if vs. v-show

V-if og v-show 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 å skjule og ikke gjengi elementer.

Hvis vi sammenligner tid og prosesseringskostnad mellom disse to. V-if koster mer under kjøretid eller bytte, mens v-show koster mer i begynnelsen av gjengivelsen. Så det ville være lurt å bruke v-show når veksling er formål. Ellers foretrekkes v-if.

Innpakning

I denne artikkelen har vi lært hvordan du kan gjengi DOM i Vue.js bruker 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 med å få en bedre forståelse og konsepter, kan du fortsette å besøke linuxhint.com for slikt nyttig innhold.