Direktivet v-show i Vue

Et annet alternativ for betinget visning er direktivet v-show. Det brukes veldig likt:

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

Forskjellen er at elementet med v-show alltid vil bli rendret og forbli i DOM, og bare CSS-egenskapen display vil bli skrudd av og på.

Direktivet v-if utfører "ekte" betinget rendering, ettersom det garanterer at hendelseslyttere og underkomponenter innenfor blokken blir ødelagt og gjenopprettet på riktig måte ved veksling av betingelsen.

Direktivet v-if er også lat: hvis betingelsen er usann ved den første renderingen, vil den ikke gjøre noe - den betingede blokken vil ikke bli rendret før betingelsen blir sann.

Til sammenligning er v-show mye enklere - elementet rendres alltid, uavhengig av utgangstilstanden, med veksling basert på CSS.

Generelt har v-if høyere vekslingskostnader, mens v-show har høyere kostnader ved første rendering. Så bruk v-show hvis vekslinger vil være hyppige, og foretrekk v-if hvis betingelsen kanskje ikke endres under kjøring.

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

Det er gitt et avsnitt og en knapp. Gjør slik at avsnittet toggle ved klikk på knappen.

Forklar forskjellene mellom direktivene v-show og v-if.

Forklar når det er bedre å bruke direktivet v-show, og når - v-if.

Forklar hvilke begrensninger direktivet v-show har.