Vue'da v-show Direktifi

Koşullu görüntülemenin bir başka seçeneği de v-show direktifidir. Kullanımı oldukça benzer:

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

Fark şu ki, v-show kullanan bir element her zaman işlenecek ve DOM'da kalacaktır, değişen ise sadece onun CSS display özelliği olacaktır.

v-if direktifi "gerçek" koşullu işleme gerçekleştirir, çünkü koşul değiştiğinde bloğun içindeki olay dinleyicilerinin ve alt bileşenlerin doğru şekilde yok edilmesini ve yeniden oluşturulmasını garanti eder.

v-if direktifi aynı zamanda tembeldir: eğer koşul ilk işleme sırasında yanlışsa, hiçbir şey yapmaz - koşullu blok koşul doğru olana kadar işlenmez.

Karşılaştırıldığında, v-show çok daha basittir - element ilk durumundan bağımsız olarak her zaman işlenir ve CSS tabanlı geçiş yapar.

Genel olarak, v-if'in geçiş maliyeti daha yüksektir, v-show ise ilk işleme maliyeti daha yüksektir. Bu nedenle, geçişlerin sık olacağı durumlarda v-show kullanın, ve koşulun çalışma zamanında değişmeme ihtimali varsa v-if'i tercih edin.

v-show direktifi template elementinde kullanılamaz ve v-else ile çalışmaz.

Bir paragraf ve bir buton verilmiştir. Butona tıklandığında paragrafın görünürlüğünün değişmesini sağlayın.

v-show ve v-if direktifleri arasındaki farkları anlatın.

v-show direktifini ne zaman kullanmanın, v-if direktifini ise ne zaman kullanmanın daha iyi olduğunu anlatın.

v-show direktifinin hangi kısıtlamalara sahip olduğunu anlatın.