Direktiva v-show v Vue

Še ena možnost za pogojno prikazovanje je direktiva v-show. Uporablja se zelo podobno:

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

Razlika je v tem, da bo element z v-show vedno izrisan in ostane v DOM-u, preklapljalo pa se bo samo njegovo CSS lastnost display.

Direktiva v-if izvaja "pravo" pogojno upodabljanje, saj zagotavlja, da se poslušalci dogodkov in podrejene komponente znotraj bloka ustrezno uničijo in ponovno ustvarijo ob preklapljanju pogoja.

Direktiva v-if je tudi leniva: če je pogoj napačen v času začetnega upodabljanja, potem ne naredi nič - pogojni blok ne bo upodobljen vse dokler pogoj ne postane resničen.

Za primerjavo, v-show je veliko bolj preprosta - element je vedno upodobljen, ne glede na začetno stanje s preklapljanjem na podlagi CSS.

Na splošno ima v-if večje stroške preklapljanja, medtem ko ima v-show večje stroške pri začetnem upodabljanju. Zato uporabite v-show, če bodo preklapljanja pogosta, in raje uporabite v-if, če se pogoj morda ne bo spremenil med izvajanjem.

Direktive v-show ni mogoče uporabiti na elementu template in ne deluje z v-else.

Podan je odstavek in gumb. Naredite tako, da se odstavek preklaplja ob pritisku na gumb.

Povejte, v čem so razlike direktiv v-show in v-if.

Povejte, kdaj je bolje uporabiti direktivo v-show, in kdaj - v-if.

Povejte, katere omejitve ima direktiva v-show.