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