Direktyva v-show Vue

Kitas sąlyginio rodymo variantas yra direktyva v-show. Naudojama labai panašiai:

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

Skirtumas tas, kad elementas su v-show visada bus atvaizduojamas ir liks DOM'e, o bus perjungiama tik jo CSS savybė display.

Direktyva v-if atlieka "tikrą" sąlyginį atvaizdavimą, nes garantuoja, kad įvykių klausytojai ir vidiniai komponentai viduje bloko tinkamai sunaikinami ir atkuriami perjungiant sąlygas.

Direktyva v-if taip pat yra tingi: jei sąlyga klaidinga pradinio atvaizdavimo metu, ji nieko nepadarys - sąlyginis blokas nebus atvaizduotas tol, kol sąlyga netaps tiesa.

Palyginus, v-show yra daug paprastesnė - elementas visada atvaizduojamas, nepriklausomai nuo pradinės būsenos, perjungiamas remiantis CSS.

Apskritai, v-if turi didesnes perjungimo išlaidas, o v-show turi didesnes pradinio atvaizdavimo išlaidas. Taigi naudokite v-show, jei perjungimai bus dažni, ir teikite pirmenybę v-if, jei sąlyga gali ir nepasikeisti vykdymo metu.

Direktyvos v-show negalima naudoti ant elemento template ir ji neveikia su v-else.

Duotas pastraipa ir mygtukas. Padarykite taip, kad pastraipa būtų įjungiama/išjungiama paspaudus ant mygtuko.

Papasakokite, kuo skiriasi direktyvos v-show ir v-if.

Papasakokite, kada geriau naudoti direktyvą v-show, o kada - v-if.

Papasakokite, kokius apribojimus turi direktyva v-show.