Programozás Vue.js Listák

VueJS listák

A következő izgalmas részben kezdő fejlesztőnk megismerkedik a v-for használatával.

Videós magyarázat


Forráskód a Github -on:

Github repo

Szöveges segítség

Gyakran előfordul, hogy listákat kell megjeleníteni az oldalon. Ehhez a VueJS szuper eszközöket ad a kezedbe, például egy ciklussal be tudod járni egy tömb elemeit, és ahány eleme van, annyi új HTML elemet generál neked.

Először kell egy lista

A listát ugyanúgy a data objektumban kell elhelyezned:

var shoppingList = new Vue({
    el: '#shopping-list',
    data: {
        header: 'shopping list app',                    
        items: [
            {
                label: '10 party hats',
                purchased: false,
                highPriority: false,
            },
            {
                label: '2 board games',
                purchased: true,
                highPriority: false,
            },
            {
                label: '20 cups',
                purchased: false,
                highPriority: false,
            },
        ],
    },
});

Lista megjelenítése

A v-for direktívát a HTML részben kell használnod, arra az elemere, amit ismételni akarsz:

<div id="shopping-list">
    <div class="header">
        <h1>{{ header.toLocaleUpperCase() }}</h1>
    </div>
    <ul>
        <li v-for="item in items">{{ item.label }}</li>
    </ul>
</div>

Látod, az elemen belül van egy helyi változó, item néven. Ez a lista egyes elemeinek a referenciája, így mindnek lesz egy label tulajdonsága, amit a listaelemben interpolálok. Nem bonyolult.

Folytatása következik ...

...Vue.js Kezdetek ...Vue.js data-binding