Voorwaardes in Lusse in Vue
Wanneer jy deur elemente iterer met lusse,
kan jy voorwaardes toepas.
Maar die v-for en v-if direktiewe
moet op verskillende etikette geskryf word,
anders sal daar 'n konflik wees. Om die konflik
te vermy word die v-for direkfief op die
template-etiket toegepas,
en die v-if direktef - direk
op die ingevoegde etiket.
Kom ons kyk na 'n voorbeeld. Laat ons die volgende skikking hê:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
Kom ons iterer deur hierdie skikking met 'n lus:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
En nou laat ons 'n voorwaarde op die elemente wat vertoon word toepas:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Die volgende skikking is gegee:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Itereer deur hierdie skikking met 'n lus en toon slegs die positiewe elemente van die skikking.
