Vue-ში v-show დირექტივა

პირობითი გამოსახვის კიდევ ერთი ვარიანტი არის v-show დირექტივა. გამოყენება ძალიან მსგავსია:

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

განსხვავება ისაა, რომ ელემენტი v-show-თან ყოველთვის გაიხატება და დარჩება DOM-ში, ხოლო გადართვა მოხდება მხოლოდ მისი CSS თვისების display მეშვეობით.

v-if დირექტივა ასრულებს "ნამდვილ" პირობით გამოსახვას, რადგან ის გარანტიას იძლევა, რომ მოვლენების მსმენელები და შვილი კომპონენტები ბლოკის შიგნით სწორად იშლებიან და ხელახლა იქმნებიან პირობის გადართვის დროს.

v-if დირექტივა ასევე ზარმაცია: თუ პირობა მცდარია საწყისი გამოსახვის მომენტში, მაშინ ის არაფერს გააკეთებს - პირობითი ბლოკი არ გაიხატება მანამ, სანამ პირობა არ გახდება ჭეშმარიტი.

შედარებისთვის, v-show ბევრად უფრო მარტივია - ელემენტი ყოველთვის გაიხატება, განურჩევლად საწყისი მდგომარეობისა, CSS-ზე დაფუძნებული გადართვით.

ზოგადად, v-if-ს აქვს უფრო მაღალი გადართვის ხარჯი, ხოლო v-show-ს აქვს უფრო მაღალი ხარჯი საწყის გამოსახვაზე. ამიტომ გამოიყენეთ v-show, თუ გადართვები ხშირი იქნება, და უპირატესობა მიანიჭეთ v-if-ს, თუ პირობა შეიძლება არ შეიცვალოს პროგრამის შესრულების დროს.

v-show დირექტივის გამოყენება არ შეიძლება template ელემენტზე და ის არ მუშაობს v-else-თან.

მოცემულია აბზაცი და ღილაკი. გახადეთ ისე, რომ აბზაციის ხილვადობა იცვლებოდეს ღილაკზე დაჭერისას.

მოგვიყევით, რა განსხვავებაა დირექტივებს შორის v-show და v-if.

მოგვიყევით, როდის არის უკეთესი გამოვიყენოთ დირექტივა v-show, და როდის - v-if.

მოგვიყევით, რა შეზღუდვები აქვს დირექტივას v-show.