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

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

← →
↑