Vue.js kurz & gut

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. ...