Vue.JS Koşullar ve Döngüler
Vue.js, bir JavaScript framework'üdür ve özellikle kullanıcı arayüzü oluşturmak için tasarlanmıştır. Vue.js, HTML, CSS ve JavaScript ile entegre bir şekilde çalışır. Vue.js, özellikle bileşen tabanlı bir yapı sunar ve bu sayede bir uygulamayı küçük, bağımsız ve tekrar kullanılabilir bileşenlere ayırmanıza olanak tanır. Koşullar ve döngüler, Vue.js'te oldukça önemli olan iki yapı taşını oluştururlar.
Koşullar (v-if, v-else-if, v-else):
Vue.js'de koşullu renderlama yapmak için v-if, v-else-if ve v-else direktifleri kullanılır. İşte basit bir örnek:
JavaScript kodu:
Yukarıdaki örnekte, isTrue verisi true olduğu sürece ilk paragraf görünecek, aksi halde ikinci paragraf görünecektir.
Döngüler (v-for):
Vue.js, bir dizi veya nesne üzerinde döngü yapmak için v-for direktifini sağlar. İşte basit bir dizi üzerinde döngü örneği:
JavaScript kodu:
Yukarıdaki örnekte, v-for direktifiyle items dizisi üzerinde döngü yapılır ve her bir öğe için bir liste elemanı oluşturulur.
Bu temel örnekler, Vue.js'in koşullar ve döngülerini kullanımını anlamanıza yardımcı olacaktır.
Bu örnekte, bir düğmeye tıklanıp tıklanmadığını kontrol eden bir koşul kullanılmaktadır. Butona tıklandığında, ekranda bir metin görünecek.
Bu örnekte, Vue.js kullanılarak bir Vue instance oluşturulmuş ve isButtonClicked adında bir veri (data) öğesi tanımlanmıştır. Düğmeye tıklama işlemi showMessage adındaki bir method ile kontrol edilmiş ve bu method içinde isButtonClicked değeri tersine çevrilmiştir. v-if direktifi ile bu değere bağlı olarak bir metin görüntülenmektedir.
0 Yorum
Takip Et
Tüm hakları saklıdır. © 2024
Yorum Yap