Betingelser i løkker i Vue
Når du itererer gjennom elementer med løkker,
kan du legge på betingelser.
Men direktivene v-for og v-if
må skrives på forskjellige tagger,
ellers vil det oppstå en konflikt. For å unngå
konflikt brukes direktivet v-for
på en template-tagg,
og direktivet v-if brukes direkte
på den innsatte taggen.
La oss se på et eksempel. Anta at vi har følgende array:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
La oss iterere gjennom denne arrayen med en løkke:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
Og nå legger vi en betingelse på elementene som vises:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Gitt følgende array:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Iterer gjennom denne arrayen med en løkke og vis kun de positive elementene i arrayen.
