KAPITEL 7
Iteratives Rendering mit v-for
Für das Rendering von Listen bietet Vue die Direktive v-for an. Mit ihr kann eine Liste von Elementen basierend auf einem Array im Template gerendert werden. Dazu nutzt v-for eine spezielle Syntax im Format item in items. Das Daten-Array wird hier von items repräsentiert. Der Alias für das Element der aktuellen Iteration ist item:
<ul id="app">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var vm = new Vue({
el: '#app',
data: {
items: [
{ id: 1, message: 'Foo' },
{ id: 2, message: 'Bar' }
]
}
})
Das obige Beispiel erzeugt folgende Ausgabe:
Foo
Bar
Innerhalb von v-for kann auf alle Daten der übergeordneten Hierarchieebene zugegriffen werden. Auch eine Verschachtelung von v-for ist möglich. ...
Get Vue.js kurz & gut now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
