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.
|
1 2 3 4 5 6 7 |
data() { return { mesaj: "Merhaba dünya! Vue.JS", girisDurum: false } |
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.
|
1 2 3 |
<button v-if="girisDurum">ÇIKIŞ YAP</button> |
Ş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.
|
1 2 3 4 5 6 |
<template v-if="girisDurum"> <label> Çıkış Yap </button> <button> Çıktış </button> </template> |
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.
|
1 2 3 4 |
<button v-if="girisDurum"> Çıkış Yap</button> <button v-else> Giriş Yap </button> |
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.
|
1 2 3 4 5 |
<button v-if="girisDurum"> ÇIKIŞ YAP </button> <label v-else-if="girisEngelli"> Giriş Engellenmiş </label> <button v-else> Giriş Yap </button> |
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 Yap