Liste Renderleme

Bir kaynak diziye dayanarak bir dizi öğeyi render etmek için v-for direktifini kullanabiliriz:

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

Burada todo, şu anda üzerinde geçiş yapılan dizi elemanını temsil eden yerel bir değişkendir. Sadece v-for öğesi ya da içinde erişilebilir, bir fonksiyon kapsamına benzer.

bilgi

Her todo nesnesine benzersiz bir id verdiğimizi ve bunu her için `özel `key` özniteliği` olarak bağladığımızı unutmayın. `key`, Vue'nun her'yi dizideki karşılık gelen nesnesinin konumuna göre doğru bir şekilde taşınmasını sağlar.

Listeyi güncellemenin iki yolu vardır:

Kaynak dizi üzerinde değiştirme yöntemlerini çağırmak:

todos.value.push(newTodo)

this.todos.push(newTodo)

Diziyi yeni bir dizi ile değiştirmek:

todos.value = todos.value.filter(/* ... */)

this.todos = this.todos.filter(/* ... */)

Burada basit bir todo listemiz var - addTodo() ve removeTodo() yöntemleri için mantığı uygulamayı deneyin!

ipucu

v-for hakkında daha fazla ayrıntı için: Kılavuz - Liste Renderleme

Liste Renderleme​

Liste Renderleme