Условия в циклах в 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],
	}
}

Переберите этот массив циклом и выведите только положительные элементы массива.