Direktíva v-show vo Vue

Ďalšou možnosťou podmieneného zobrazenia je direktíva v-show. Používa sa veľmi podobne:

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

Rozdiel je v tom, že prvok s v-show bude vždy vykreslený a zostane v DOM, a prepínať sa bude len jeho CSS vlastnosť display.

Direktíva v-if vykonáva "skutočné" podmienené vykreslovanie, pretože zaručuje, že odpočúvače udalostí a podriadené komponenty vnútri bloku sú riadne zničené a znovu vytvorené pri prepínaní podmienky.

Direktíva v-if je tiež lenivá: ak je podmienka nepravdivá v čase počiatočného vykreslenia, neurobí nič - podmienený blok nebude vykreslený, kým sa podmienka nestane pravdivou.

Pre porovnanie, v-show je oveľa jednoduchšia - prvok je vždy vykreslený, bez ohľadu na počiatočný stav, s prepínaním založeným na CSS.

Vo všeobecnosti má v-if vyššie náklady na prepínanie, kým v-show má vyššie náklady na počiatočné vykreslenie. Takže použite v-show, ak budú prepínania časté, a uprednostnite v-if, ak sa podmienka počas behu programu nemusí zmeniť.

Direktívu v-show nemožno použiť na prvku template a nefunguje s v-else.

Daný odstavec a tlačidlo. Urobte tak, aby sa odstavec prepínal (toggol) stlačením tlačidla.

Povedzte, v čom sa líšia direktívy v-show a v-if.

Povedzte, kedy je lepšie použiť direktívu v-show, a kedy - v-if.

Povedzte, aké obmedzenia má direktíva v-show.