Vue.js Koşullu Yönergeler – Tasarım Kodlama
Vue.js

Vue.js Koşullu Yönergeler

Koşullara göre öğeleri gösterme veya gizleme yeteneği, herhangi bir ön uç çerçevesinin temel bir özelliğidir. Vue.js bu efekti elde etmek için bize bir dizi temel direktif sağlar: v-if, v-else, v-else-if ve v-show.

Bir Vue.js Hello World uygulamasına başladıktan sonra, görünümü koşullu olarak kontrol etmek için JavaScript veri nesnesindeki değerleri kullanabiliriz. Örneğin, aşağıda verilen basit veri nesnesinin nasıl kullanılacağını göreceğiz.

v-if

v-if yönergesi, verilen ifadeye göre DOM öğelerini ekler veya kaldırır.

Veri modelindeki girisDurum özelliğini kullanabilir ve görünümde bir giriş düğmesi gösterebiliriz.

Şimdi, girisDurum öğesi false olarak ayarlandığından düğme gösterilmez. data.girisDurum değerinin true olarak ayarlanması, düğmeyi DOM’ye ekler.

<template> elementi

v-if yönergesi yalnızca bir öğeyi (ve alt öğelerini) gösterebilir veya gizleyebilir, ancak çoğaltmayı azaltarak birden fazla öğeyi tek bir v-if ile denetleyebilirsiniz.

Bunu yapmak için, bu koşul tarafından kontrol edilmesi gereken tüm öğeleri bir <template> öğesinde sarmanız gerekir. Şablon öğesinin kendisi DOM’ye eklenmez. Ancak tüm içeren elemanlar v-if ifadesine bağlı olarak eklenecek veya kaldırılacaktır.

Örneğin, girisDurum true olduğunda bir etiketin yanı sıra bir düğmeyi de göstermeniz gerekiyorsa, her iki öğeyi de tek bir şablon öğesinde aşağıdaki gibi sarabilirsiniz.

v-else

v-else adından da anlaşılacağı gibi, bu yönerge içeriği yalnızca v-if bitişiğindeki ifade false olarak çözüldüğünde görüntülemek için kullanılır.

girisDurum false olduğunda otomatik olarak göstermek için bir Oturum Aç düğmemize sahip olabiliriz.

v-else, kendisine iletilen bir değere ihtiyaç duymaz. Ancak, v-if veya v-else-if yönergelerini içeren bir öğeden hemen sonra gelen bir öğede olmalıdır.

v-else-if

v-else-if, ikiden fazla seçeneğin kontrol edilmesi gerektiğinde kullanılabilir. Bu, else-if zincirindeki zincirlenmiş öğelerden sadece birinin görünür olmasını sağlayacaktır.

Örneğin, girisDurum adlı özellik true olursa, Oturum Aç düğmesinin görüntülenmesini engelleyebilir ve bunun yerine bir etiket görüntüleyebiliriz. Bunu v-else-if yönergesini aşağıdaki gibi kullanarak başarabiliriz.

V-show
v-if gibi çok benzer bir şekilde, v-show yönergesi ifadeye dayalı bir öğeyi göstermek ve gizlemek için de kullanılabilir.

İkisi arasındaki temel fark şudur:

  • v-if – Yalnızca ifade geçerse öğeyi DOM öğesine oluşturur.
  • v-show – Tüm öğeleri DOM’ye dönüştürür ve sonra ifade başarısız olursa öğeleri gizlemek için CSS display özelliğini kullanır.
  • v-show – v-else desteklemiyor, v-else-if
  • Genellikle, v-show öğelerin sık açılıp kapanması durumunda bir performans avantajına sahipken, v-if ilk oluşturma zamanı söz konusu olduğunda avantajlıdır.

 

 

Yorum bırak