Vue.js är ett lättlärt och tillgängligt bibliotek som vi kan börja bygga webbapplikationer i det med grundläggande kunskaper om webbutveckling. I Vue.js, utvecklare älskar att koda och känna frihet när de utvecklar applikationer.

I alla dynamiska webbapplikationer är villkorlig återgivning en nödvändig del. Vue.js ger olika sätt för villkorlig återgivning, och vi kan använda något av följande sätt som passar vårt syfte:

• v-show
• v-if
• v-else

I den här artikeln kommer vi att prova dessa direktiv som tillhandahålls av Vue.js för villkorlig återgivning och förstå dem på ett bättre sätt.

v-show

V-showen döljer bara elementet genom att inaktivera dess synlighet. Det döljer elementet om värdet på det passerade uttrycket eller variabeln inte är sanningsenligt.

Till exempel:

Denna punkt är inte dold

Denna punkt är dold

v-if

Å andra sidan döljer v-if inte elementet, men det återges inte heller förrän värdet på det passerade uttrycket eller variabeln blir sant.

Till exempel:

Det finns en ytterligare funktion i v-if-direktivet jämfört med v-show-direktivet. Vi kan också använda den på mallblocket om vi inte vill göra något mellan det blocket. Antingen finns det en underkomponent i det eller många andra element.

Till exempel:

v-else

Vi kan också använda v-else-direktivet tillsammans med v-if-uttalandet för att villkorligt återge mellan något av de två blocken. Men med tanke på att v-else-blocket måste visas direkt efter v-if-blocket.

Till exempel:

Denna punkt återges om 'isVar' blir sant

Annars kommer det här stycket att återges.

Vi kan också använda v-else på mallblocket.

v-else-if

Precis som v-else kan vi också använda v-else-if-direktivet tillsammans med v-if-direktivet.

Till exempel:

v-if vs. v-show

V-if och v-show gör samma uppgift. De döljer båda elementen i DOM baserat på det sanna eller falska värdet av det passerade uttrycket, men med en subtil skillnad mellan att dölja och inte återge element.

Om vi ​​jämför tiden och bearbetningskostnaden mellan dessa två. V-if kostar mer under körning eller växling, medan v-show kostar mer i början av rendering. Så det vore klokt att använda v-show när växling är syfte. Annars föredras v-if.

Avslutar

I den här artikeln har vi lärt oss hur man vill återge DOM i Vue.js använder v-if och v-else-direktiv. Vi har visat några exempel och lärt oss om den verkliga skillnaden mellan v-show och v-if-direktivet. Om den här artikeln hjälper dig att få en bättre förståelse och begrepp, fortsätt med att besöka linuxhint.com för sådant användbart innehåll.