Vue.js v-show kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Vue.Js v-show kullanımı v-if kullanımına ile genel olarak bakıldığında aynı gözükmektedir. Fakat Dom üzerinde v-if ile v-show un temellerinde farklılık oluşmaktadır.

Kullanımı : v-show = ""

v-show dom üzerinde etkilediği etiketi gizle / göster işlemini uygulamaktadır. Bu uygulamayı sağlarken v-if gibi Dom üzerinden etiketi tamamen kaldırmamaktadır. v-show ile gizleme işlemi sağlandığında html etiketini Dom üzerinden silmeden css özelliği olan display='none' özelliği ile gizlemektedir.

<div id="app">
	<p v-show="simple">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	</p>
	<button @click="simple = !simple">Göster / Gizle</button>
</div>
new Vue({
	el : "#app",
	data : {
		simple : true
	}
});

Yukarıdaki örnekte p etiketimizi simple değişkenine göre göster / gizle işlemi uygulamaktayız. Burada v-show un çalışabilmesi için true veya false değerlerinin dönmesi gereklidir. true değeri dönmesi durumunda etiketi gösteri false değeri dönmesi durumunda HTML etiketini gizlemektedir.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol