A v-show direktíva Vue-ban

Egy másik lehetőség a feltételes megjelenítésre a v-show direktíva. Nagyon hasonlóan használható:

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

Az eltérés az, hogy a v-show-val ellátott elem mindig megjelenik és a DOM-ban marad, és csak annak CSS display tulajdonsága vált.

A v-if direktíva "valódi" feltételes megjelenítést hajt végre, mivel garantálja, hogy az eseményfigyelők és a gyermek komponensek a blokkban megfelelően megsemmisülnek és újjáépülnek a feltétel váltogatásakor.

A v-if direktíva lusta is: ha a feltétel hamis a kezdeti megjelenítéskor, akkor nem csinál semmit - a feltételes blokk nem jelenik meg addig, amíg a feltétel igazzá nem válik.

Összehasonlításképp, a v-show sokkal egyszerűbb - az elem mindig megjelenik, függetlenül a kezdeti állapottól, CSS-alapú váltással.

Általában véve, a v-if-nek magasabbak a váltási költségei, míg a v-show-nak nagyobbak a kezdeti megjelenítési költségei. Ezért használj v-show-t, ha a váltások gyakoriak lesznek, és részesítsd előnyben a v-if-et, ha a feltétel lehet, hogy nem fog változni a futás során.

A v-show direktíva nem használható template elemen és nem működik a v-else-sel.

Adott egy bekezdés és egy gomb. Állítsa be úgy, hogy a bekezdés a gomb megnyomására elrejtődjön/megjelenjen.

Meséljen el, miben különböznek a v-show és v-if direktívák.

Meséljen el, mikor érdemes a v-show direktívát használni, és mikor a v-if-et.

Meséljen el, milyen korlátozásai v-show direktívának.