Nosacījumi cilpās Vue
Atkārtojot elementus ar cilpām,
var uzlikt nosacījumus.
Bet direktīvas v-for un v-if
jāraksta uz dažādām tagām,
pretējā gadījumā būs konflikts. Lai izvairītos no
konflikta, direktīvu v-for
lieto uz template tag,
un direktīvu v-if - tieši
uz ievietojamo tag.
Apskatīsim piemērā. Pieņemsim, ka mums ir šāds masīvs:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
Atkārtosim šo masīvu ar ciklu:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
Un tagad uzliksim nosacījumu attēlojamajiem elementiem:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Dots šāds masīvs:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Atkārtojiet šo masīvu ar ciklu un izvadiet tikai pozitīvos masīva elementus.
