Die v-show Direktief in Vue
Nog 'n opsie vir voorwaardelike vertoning
is die direktef v-show.
Word baie soortgelyk gebruik:
<template>
<p v-show="isAuth">
+++
</p>
</template>
Die verskil is dat 'n element met v-show altyd
gerender sal word en in die DOM sal bly, en slegs sy
CSS eienskap display sal geskakel word.
Die direktef v-if voer 'n "werklike"
voorwaardelike rendering uit, aangesien dit waarborg
dat gebeurtenisluisteraars en kinderkomponente
binne die blok behoorlik vernietig
en herskep word wanneer die voorwaarde verander.
Die direktef v-if is ook lui: as die voorwaarde
vals is tydens die aanvanklike rendering,
dan sal dit niks doen nie - die voorwaardelike blok
sal nie gerender word totdat
die voorwaarde waar word nie.
In vergelyking, is v-show baie eenvoudiger - die element
word altyd gerender, ongeag die
aanvanklike toestand, met skakeling gebaseer op CSS.
Oor die algemeen het v-if hoër skakelkoste,
terwyl v-show hoër aanvanklike
renderkoste het. Gebruik dus v-show,
as skakelings gereeld sal plaasvind,
en verkies v-if, as die voorwaarde
miskien nie tydens uitvoering sal verander nie.
Die direktef v-show kan nie op 'n
template element gebruik word nie en werk nie met v-else nie.
Daar is 'n paragraaf en 'n knoppie. Maak so dat die paragraaf getoggle word wanneer op die knoppie gedruk word.
Verduidelik wat die verskille is tussen die direktiewe
v-show en v-if.
Verduidelik wanneer dit beter is om die
direktef v-show te gebruik, en wanneer - v-if.
Verduidelik watter beperkings
die direktef v-show het.