Vue.js is een gemakkelijk te leren en benaderbare bibliotheek waarmee we webapplicaties kunnen bouwen met de basiskennis van webontwikkeling. In Vue.js, ontwikkelaars houden ervan om te coderen en vrijheid te voelen tijdens het ontwikkelen van applicaties.

In elke dynamische webtoepassing is voorwaardelijke weergave een noodzakelijk onderdeel. Vue.js biedt verschillende manieren voor voorwaardelijke weergave en we kunnen elk van de volgende manieren gebruiken die bij ons doel passen:

• v-show
• v-if
• v-anders

In dit artikel zullen we deze richtlijnen van Vue . proberen.js voor voorwaardelijke weergave en begrijp ze op een betere manier.

v-show

De v-show verbergt het element alleen door de zichtbaarheid ervan uit te schakelen. Het verbergt het element als de waarde van de doorgegeven uitdrukking of variabele niet waarheidsgetrouw is.

Bijvoorbeeld:

Deze alinea is niet verborgen

Deze alinea is verborgen

v-if

Aan de andere kant verbergt v-if het element niet, maar het geeft ook niets weer totdat de waarde van de doorgegeven uitdrukking of variabele waar wordt.

Bijvoorbeeld:

Er is een extra functie in de v-if-richtlijn in vergelijking met de v-show-richtlijn. We kunnen het ook toepassen op het sjabloonblok als we niets tussen dat blok willen weergeven. Of er zit een onderliggende component in of een heleboel andere elementen.

Bijvoorbeeld:

v-anders

We kunnen ook de v-else-richtlijn samen met de v-if-instructie gebruiken om voorwaardelijk tussen een van de twee blokken weer te geven. Maar houd er rekening mee dat het v-else blok direct na het v-if blok moet verschijnen.

Bijvoorbeeld:

Deze paragraaf wordt weergegeven als 'isVar' waar wordt

Anders wordt deze paragraaf weergegeven.

We kunnen v-else ook op het sjabloonblok toepassen.

v-else-if

Net als v-else kunnen we ook de v-else-if-richtlijn gebruiken samen met de v-if-richtlijn.

Bijvoorbeeld:

v-if vs. v-show

De v-if en v-show doen ongeveer dezelfde taak. Ze verbergen allebei de elementen in de DOM op basis van de waarheids- of onwaarheid van de doorgegeven expressie, maar met een subtiel verschil tussen verbergen en niet weergeven van elementen.

Als we de tijd en verwerkingskosten tussen deze twee vergelijken,. De v-if kost meer tijdens runtime of schakelen, terwijl v-show meer kost aan het begin van de weergave. Het zou dus verstandig zijn om v-show te gebruiken wanneer schakelen een doel is. Anders heeft v-if de voorkeur.

Afsluiten

In dit artikel hebben we geleerd hoe we de DOM voorwaardelijk kunnen weergeven in Vue.js met behulp van v-if en v-else richtlijnen. We hebben enkele voorbeelden getoond en geleerd over het echte verschil tussen v-show en v-if-richtlijn. Als dit artikel je helpt om een ​​beter begrip en concepten te krijgen, blijf dan linuxhint bezoeken.com voor zulke nuttige inhoud.