Direktiva v-show në Vue

Një tjetër mundësi për shfaqje të kushtëzuar është direktiva v-show. Përdoret në mënyrë shumë të ngjashme:

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

Ndryshimi është se elementi me v-show do të jetë gjithmonë i renderuar dhe do të mbetet në DOM, dhe do të ndërrohet vetëm vetia e tij CSS display.

Direktiva v-if kryen një renderim të vërtetë të kushtëzuar, pasi garanton që dëgjuesit e ngjarjeve dhe nënpërbërësit fëmijë brenda bllokut shkatërrohen dhe rikrijohen si duhur gjatë ndërrimit të kushtit.

Direktiva v-if është gjithashtu dembel: nëse kushti është i rremë në kohën e renderimit fillestar, atëherë ajo nuk do të bëjë asgjë - blloku i kushtëzuar nuk do të renderohet derisa kushti të bëhet i vërtetë.

Krahasuar, v-show është shumë më e thjeshtë - elementi renderohet gjithmonë, pavarësisht nga gjendja fillestare me ndërrim të bazuar në CSS.

Në përgjithësi, v-if ka kosto më të larta të ndërrimit, ndërsa v-show ka më shumë kosto në renderimin fillestar. Pra, përdorni v-show, nëse ndërrimet do të jenë të shpeshta, dhe preferoni v-if, nëse kushti mund të mos ndryshojë gjatë ekzekutimit.

Direktiva v-show nuk mund të përdoret në elementin template dhe nuk funksionon me v-else.

Jepet një paragraf dhe një buton. Bëni që paragrafi të toggle-ojë me klikim në buton.

Shpjegoni, cilat janë ndryshimet midis direktivave v-show dhe v-if.

Shpjegoni, kur është më mirë të përdoret direktiva v-show, dhe kur - v-if.

Shpjegoni, çfarë kufizimesh ka direktiva v-show.