Vue'i direktiiv v-show

Veel üks võimalus tingimustega kuvamiseks on direktiiv v-show. Seda kasutatakse väga sarnaselt:

<template>
	<p v-show="isAuth">
		+++
	</p>
</template>

Erinevus seisneb selles, et element v-show-ga renderdatakse alati ja jääb DOM-i, kuid lülitub vaid selle CSS omadus display.

Direktiiv v-if teostab "päris" tingimusliku renderdamise, kuna tagab, et sündmuste kuulajad ja lapskomponendid ploki sees hävitatakse ja luuakse uuesti õigesti tingimuse lülitumisel.

Direktiiv v-if on samuti laisk: kui tingimus on algsel renderdamisel väär, siis see ei tee midagi - tingimuslik plokk ei renderdata enne, kui tingimus muutub tõeseks.

Võrdeldes on v-show palju lihtsam - element renderdatakse alati, sõltumata algseisundist, lülitudes CSS-i põhjal.

Üldiselt on v-if-l suuremad lülitumiskulud, sel ajal kui v-show-l on suuremad algse renderdamise kulud. Seega kasutage v-show, kui lülitumised on sageli, ja eelistage v-if, kui tingimus ei pruugi käitamise ajal muutuda.

Direktiivi v-show ei saa kasutada elemendil template ja see ei toimi koos v-else-ga.

On antud lõik ja nupp. Tehke nii, et lõik lülituks nupu vajutamisel sisse ja välja.

Rääkige, milles erinevad direktiivid v-show ja v-if.

Rääkige, millal on parem kasutada direktiivi v-show ja millal - v-if.

Rääkige, millised piirangud direktiivil v-show on.