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