Vue.js v-show kullanımı

Sezai AlkanFrontend Developer

Vue.js #vue-js #v-if #v-show

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.