Vue.js er et let at lære og tilgængeligt bibliotek, som vi kan begynde at opbygge webapplikationer i det med den grundlæggende viden om webudvikling. I Vue.js, udviklere elsker at kode og føle frihed, mens de udvikler applikationer.

I enhver dynamisk webapplikation er betinget gengivelse en nødvendig del. Vue.js giver forskellige måder til betinget gengivelse, og vi kan bruge en af ​​følgende måder, der passer til vores formål:

• v-show
• v-if
• v-ellers

I denne artikel vil vi prøve disse direktiver leveret af Vue.js til betinget gengivelse og forstå dem på en bedre måde.

v-show

V-showet skjuler kun elementet ved at deaktivere dets synlighed. Det skjuler elementet, hvis værdien af ​​det beståede udtryk eller variabel ikke er sand.

For eksempel:

Dette afsnit er ikke skjult

Dette afsnit er skjult

v-if

På den anden side skjuler v-if ikke elementet, men det gengiver heller ikke noget, før værdien af ​​det beståede udtryk eller variabel bliver sand.

For eksempel:

Der er en ekstra funktion i v-if-direktivet sammenlignet med v-show-direktivet. Vi kan også anvende den på skabelonblokken, hvis vi ikke ønsker at gengive noget imellem den blok. Enten er der en underkomponent i det eller mange andre elementer.

For eksempel:

v-ellers

Vi kan også bruge v-else-direktivet sammen med v-if-sætningen for at gengive betinget mellem en af ​​de to blokke. Men husk på, at v-else-blokken skal vises lige efter v-if-blokken.

For eksempel:

Dette afsnit gengives, hvis 'isVar' bliver sandt

Ellers bliver dette afsnit gengivet.

Vi kan også anvende v-else på skabelonblokken.

v-ellers-hvis

Ligesom v-else kan vi også bruge v-else-if-direktivet sammen med v-if-direktivet.

For eksempel:

v-if vs. v-show

V-if og v-show udfører den samme opgave. De skjuler begge elementerne i DOM baseret på sandheden eller den falske værdi af det passerede udtryk, men med en subtil forskel på at skjule og ikke gengive elementer.

Hvis vi sammenligner tids- og behandlingsomkostningerne mellem disse to. V-if koster mere under løbetid eller skift, mens v-show koster mere i starten af ​​gengivelsen. Så det ville være klogt at bruge v-show, når skift er formål. Ellers foretrækkes v-if.

Afslutter

I denne artikel har vi lært, hvordan man gengiver DOM i Vue.js ved hjælp af v-if- og v-else-direktiver. Vi har vist nogle eksempler og lært om den reelle forskel mellem v-show og v-if-direktivet. Hvis denne artikel hjælper dig med at få en bedre forståelse og begreber, skal du fortsætte med at besøge linuxhint.com for sådan nyttigt indhold.