Vue-də v-show direktivi

Şərti göstərmənin bir başqa variantı v-show direktividir. Çox oxşar şəkildə istifadə olunur:

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

Fərq ondadır ki, v-show olan element həmişə render olunacaq və DOM-da qalacaq, dəyişəcək olan isə yalnız onun CSS display xassəsidir.

v-if direktivi "həqiqi" şərti render etmə həyata keçirir, çünki o, şərt dəyişdikdə blokun daxilindəki hadisə dinləyicilərinin və uşaq komponentlərinin düzgün şəkildə məhv edilməsini və yenidən yaradılmasını təmin edir.

v-if direktivi həm də tənbəl (lazy) davranır: əgər şərt ilkin render zamanı yalanışdırsa, o, heç nə etməz - şərti blok şərt doğru olana qədər render olunmayacaq.

Müqayisə etdikdə, v-show daha sadədir - element həmişə, ilkin vəziyyətindən asılı olmayaraq, render olunur və CSS əsasında dəyişir.

Ümumiyyətlə, v-if-in dəyişmə dəyəri (toggle cost) daha yüksəkdir, v-show-in isə ilkin render dəyəri daha çoxdur. Beləliklə, əgər dəyişmələr tez-tez baş verəcəksə, v-show istifadə edin, və əgər şərt icra zamanı dəyişməyə bilərsə, v-if-ə üstünlük verin.

v-show direktivi template elementində istifadə edilə bilməz və v-else ilə işləmir.

Bir abzas və bir düymə verilib. Elə edin ki, abzas düyməyə kliklədikdə göstərilib-gizlənsin (toggle olsun).

v-show və v-if direktivləri arasında nə fərqlər olduğunu izah edin.

v-show direktivini nə vaxt, v-if direktivini isə nə vaxt istifadə etməyin daha yaxşı olduğunu izah edin.

v-show direktivinin hansı məhdudiyyətləri olduğunu izah edin.