Условия в циклах в Vue
При переборе элементов циклами
можно накладывать условия.
Но директивы v-for и v-if
нужно писать на разных тегах,
иначе будет конфликт. Во избежания
конфликта директиву v-for
применяют к тегу template,
а директиву v-if - непосредственно
к вставляемому тегу.
Давайте посмотрим на примере. Пусть у нас есть следующий массив:
data() {
return {
arr: [1, 2, 3, 4, 5],
}
}
Переберем этот массив циклом:
<template>
<ul>
<li v-for="elem in arr">
{{ elem }}
</li>
</ul>
</template>
А теперь наложим условие на показываемые элементы:
<template>
<ul>
<template v-for="elem in arr">
<li v-if="elem % 2 === 0">
{{ elem }}
</li>
</template>
</ul>
</template>
Дан следующий массив:
data() {
return {
items: [1, -2, 3, -4, 5],
}
}
Переберите этот массив циклом и выведите только положительные элементы массива.