De v-show Directive in Vue
Een andere optie voor conditioneel weergeven
is de directive v-show.
Het wordt zeer vergelijkbaar gebruikt:
<template>
<p v-show="isAuth">
+++
</p>
</template>
Het verschil is dat een element met v-show altijd
gerenderd zal worden en in de DOM zal blijven, en alleen
zijn CSS eigenschap display
zal worden getoggeld.
De directive v-if voert "echte" conditionele
renderering uit, omdat het garandeert
dat event listeners en child components
in het blok correct worden vernietigd
en opnieuw aangemaakt wanneer de conditie verandert.
De directive v-if is ook lui: als de conditie
onwaar is tijdens de initiële render,
doet het niets - het conditionele blok
wordt niet gerenderd totdat
de conditie waar wordt.
Ter vergelijking, v-show is veel eenvoudiger - het element
wordt altijd gerenderd, ongeacht de
initiële staat, met toggle gebaseerd op CSS.
Over het algemeen heeft v-if hogere toggle kosten,
terwijl v-show hogere initiële
render kosten heeft. Gebruik dus v-show,
als het toggle vaak zal gebeuren,
en geef de voorkeur aan v-if als de conditie
mogelijk niet verandert tijdens runtime.
De directive v-show kan niet gebruikt worden op een
template element en werkt niet met v-else.
Er is een paragraaf en een knop. Zorg ervoor dat de paragraaf getoggled wordt bij het klikken op de knop.
Leg uit wat de verschillen zijn tussen de directives
v-show en v-if.
Leg uit wanneer het beter is om de
directive v-show te gebruiken, en wanneer - v-if.
Leg uit welke beperkingen
de directive v-show heeft.
