Условия в циклах в Vue

При переборе элементов циклами можно накладывать условия. Но директивы v-for и v-if нужно писать на разных тегах, иначе будет конфликт. Во избежания конфликта директиву v-for применяют к тегу template, а директиву v-if — непосредственно к вставляемому тегу.

App.vuedata()
{
    return {
        arr: [1, 2, 3, 4, 5],
    }
}

Переберем этот массив циклом:

App.vue<template>
    <ul>
        <li v-for="elem in arr">
            {{ elem }}
        </li>
    </ul>
</template>

А теперь наложим условие на показываемые элементы:

App.vue<template>
    <ul>
        <template v-for="elem in arr">
            <li v-if="elem % 2 === 0">
                {{ elem }}
            </li>
        </template>
    </ul>
</template>