Warunki w pętlach w Vue
Podczas iteracji elementów pętlami
można nakładać warunki.
Ale dyrektywy v-for i v-if
trzeba pisać na różnych tagach,
inaczej będzie konflikt. Aby uniknąć
konfliktu, dyrektywę v-for
stosuje się do tagu template,
a dyrektywę v-if - bezpośrednio
do wstawianego tagu.
Spójrzmy na przykład. Załóżmy, że mamy następującą tablicę:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
Przejdźmy przez tę tablicę pętlą:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
A teraz nałóżmy warunek na wyświetlane elementy:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Dana jest następująca tablica:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Przejdź przez tę tablicę pętlą i wyświetl tylko pozytywne elementy tablicy.
