Vue.js v-show kullanımı

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.