Feltételek ciklusokban Vue-ban
A ciklusokkal végighaladva az elemeken
lehet feltételeket alkalmazni.
De a v-for és v-if direktívákat
különböző tag-ekre kell írni,
különben konfliktus adódik. A konfliktus
elkerülése érdekében a v-for direktívát
egy template tag-re alkalmazzuk,
a v-if direktívát pedig közvetlenül
a beszúrandó tag-re.
Nézzük meg egy példán. Tegyük fel, hogy a következő tömbünk van:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
Haladjunk végig ezen a tömbön egy ciklussal:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
És most alkalmazzunk egy feltételt a megjelenített elemekre:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Adott a következő tömb:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Haladj végig ezen a tömbön egy ciklussal és csak a pozitív elemeket jelenítsd meg.
