Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

Vue.js v-show kullanımı

Sezai AlkanFrontend 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.

Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com