Voorwaarden in loops in Vue
Bij het doorlopen van elementen met loops
kunnen voorwaarden worden toegepast.
Maar de richtlijnen v-for en v-if
moeten op verschillende tags worden geschreven,
anders ontstaat er een conflict. Om een conflict te voorkomen
wordt de richtlijn v-for
toegepast op de template tag,
en de richtlijn v-if - direct
op de ingevoegde tag.
Laten we naar een voorbeeld kijken. Stel we hebben de volgende array:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
Laten we deze array doorlopen met een loop:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
En laten we nu een voorwaarde opleggen voor de getoonde elementen:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Gegeven de volgende array:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Doorloop deze array met een loop en toon alleen de positieve elementen van de array.
