Vue.JS For Dongusu

Vue.js'te v-for yönergesi, bir dizi veya nesne üzerinde döngü yapmak ve dinamik olarak HTML içeriği oluşturmak için kullanılır. Bu yönerge, Vue bileşenlerinde tekrarlayan yapıları işlemek için oldukça yaygın olarak kullanılır. v-for yönergesi, her bir dizi öğesi veya nesne özelliği için bir HTML elementi oluşturur ve bu elementleri döngü içinde kullanır.

İşte v-for yönergesinin kullanımı:

1. Dizi Üzerinde Döngü Yapma:

    
     <div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div>  
    
    

   Canlı Dene Kopyala

    
     new Vue({ el: '#app', data: { items: ['Elma', 'Armut', 'Üzüm'] } });  
    
    

   Canlı Dene Kopyala

   Yukarıdaki örnekte, v-for yönergesiyle items dizisi üzerinde bir döngü oluşturulmuş ve her bir öğe için bir li elementi oluşturulmuştur.

2. Dizi Elemanlarına Erişim:

   v-for yönergesi, döngü içindeki her eleman için bir item değişkenini sağlar. Bu değişken, döngü içinde o anki öğeyi temsil eder.

3. Dizi Elemanlarının İndeksine Erişim:

   v-for yönergesi, döngü içindeki her elemanın bir indeksine de erişim sağlar. Bu indeks, döngü içinde o anki öğenin sırasını temsil eder.

4. Nesne Özellikleri Üzerinde Döngü Yapma:

    
     <div id="app"> <ul> <li v-for="(value, key) in user">{{ key }}: {{ value }}</li> </ul> </div>  
    
    

   Canlı Dene Kopyala

    
     new Vue({ el: '#app', data: { user: { name: 'John', age: 30, email: 'john@example.com' } } });  
    
    

   Canlı Dene Kopyala

   Yukarıdaki örnekte, v-for yönergesiyle user nesnesinin her bir özelliği için bir li elementi oluşturulmuştur.

v-for yönergesi, Vue.js'te tekrarlayan yapıları işlemek ve dinamik içerik oluşturmak için önemli bir araçtır. Bu yönergeyi kullanarak dizi veya nesneler üzerinde kolayca döngü yapabilir ve dinamik olarak HTML içeriği oluşturabilirsiniz.