Direktivet v-show i Vue

En anden mulighed for betinget visning er direktivet v-show. Det bruges på en meget lignende måde:

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

Forskellen er, at elementet med v-show altid vil blive gengivet og forblive i DOM'en, og kun dens CSS-egenskab display vil blive skiftet.

Direktivet v-if udfører en "ægte" betinget gengivelse, da det garanterer, at event-lyttere og underkomponenter inde i blokken bliver ødelagt og genskabt korrekt, når betingelsen skifter.

Direktivet v-if er også doven: hvis betingelsen er falsk på tidspunktet for den indledende gengivelse, vil den ikke gøre noget - den betingede blok vil ikke blive gengivet, før betingelsen bliver sand.

Som en sammenligning er v-show meget enklere - elementet bliver altid gengivet, uanset starttilstanden, med skift baseret på CSS.

Generelt har v-if højere omkostninger ved skift, mens v-show har højere omkostninger ved den indledende gengivelse. Så brug v-show, hvis skiftene vil være hyppige, og foretræk v-if, hvis betingelsen måske ikke ændrer sig under kørslen.

Direktivet v-show kan ikke bruges på et element template og fungerer ikke med v-else.

Der gives et afsnit og en knap. Gør det sådan, at afsnittet toggles ved at klikke på knappen.

Forklar, hvad forskellene er mellem direktiverne v-show og v-if.

Forklar, hvornår det er bedre at bruge direktivet v-show, og hvornår - v-if.

Forklar, hvilke begrænsninger direktivet v-show har.