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>
   
   
   
   

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

   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>
   
   
   
   

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

   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.