"Enter"a basıp içeriğe geçin

Vue Js v-if ve v-show Farkı

Vue Js kullanırken bir elementi bir koşula bağlı olarak gösterirken kullandığımız iki directive var. v-if ve v-show. İkisi de aynı işi yapıyormuş gibi gözüksede aralarında bazı farklar var. Bu farkları anlamak için v-show ve v-if directivelerini örnekler üzerinden inceleyelim.

v-show


Yukarıda bulunan componentte “p” elementine v-show = “kosul” direktivini ekledik. Uygulamayı çalıştırırsak çıktı aşağıdaki gibi olacaktır.

“kosul” değişkenine “false” değerini verip uygulamayı tekrar çalıştırırsak “p” elementi gözükmeyecektir. Peki nereye gitti bu element? Aslında bir yere gittiği yok. v-show direktivi koşul sağlansada sağlanmasada elementi DOM’a aktarıyor. Koşul sağlanmadığında sadece css display özelliğini none yapıyor.

v-if

Bir elementin bir koşul sağlandığında gösterilmesini istediğimizde v-if direktifini kullanıyoruz. v-show’dan farklı olarak, eğer koşul gerçekleşmezse element render edilmez yani DOM’a aktarılmaz. Yukarıda bulunan v-show direktivini v-if olarak değiştirin ve uygulmanızı çalıştırın. Geliştirici araçlarını açın ve kodları inceleyin.

Resimde de görüldüğü gibi koşulumuz sağlanmadığı için element DOM’a aktarılmamış.

İlk Yorum Sizden Gelsin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir