В Vue условный рендеринг позволяет отображать или скрывать элементы DOM в зависимости от состояния данных. Это реализуется через специальные директивы: v-if, v-else-if, v-else и v-show. Каждая из них работает по-своему, и важно понимать различия между ними, чтобы эффективно управлять визуализацией компонентов и элементов.

v-if — Основная директива для условного рендеринга

v-if полностью удаляет элемент из DOM, если условие ложно, и вставляет его заново, когда условие становится истинным.

Пример:

<template>
<div>
<p v-if="isLoggedIn">Добро пожаловать!</p>
<p v-else>Пожалуйста, войдите</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: true
}
}
}
</script>

Если isLoggedIn — true, отобразится первая строка. Если false — вторая.

v-else — Альтернатива v-if

v-else должен идти непосредственно после v-if или v-else-if, без промежуточных тегов или пробелов.

Пример:

<p v-if="user">Привет, {{ user.name }}</p>
<p v-else>Нет данных о пользователе</p>

v-else-if — Ветвление условий

Аналог else if в обычных языках программирования. Используется, когда есть несколько условий.

<template>
<div>
<p v-if="type === 'A'">Тип A</p>
<p v-else-if="type === 'B'">Тип B</p>
<p v-else>Неизвестный тип</p>
</div>
</template>

v-show — Альтернатива v-if с display: none

v-show не удаляет элемент из DOM, а просто меняет его CSS-свойство display. Это полезно, если элемент нужно часто скрывать/показывать без пересоздания.

Пример:

<p v-show="isVisible">Этот элемент просто скрывается</p>

Если isVisible — false, элемент остаётся в DOM, но становится невидимым через CSS.

Разница между v-if и v-show

Если нужно переключать что-то часто (например, табы, модальные окна) — лучше использовать v-show. Если условие изменяется редко или элемент должен быть полностью уничтожен — v-if.

Условный рендеринг компонентов

Можно использовать условный рендеринг и для компонентов:

<ChildComponent v-if="shouldRender" />

Компонент будет создан только если shouldRender равен true.

Использование с computed / methods

Можно использовать вычисляемые свойства или методы в v-if:

<p v-if="isAdult">Доступ разрешён</p>
computed: {
isAdult() {
return this.age >= 18
}
}

Или даже методы:

<p v-if="hasPermission('admin')">Доступ администратора</p>

Комбинирование с template (без обёртки)

Если не хочется добавлять лишние теги в DOM, можно использовать директиву v-if на template. Сам template не будет отображён в DOM.

Пример:

<template v-if="error">
<p>Произошла ошибка</p>
<button @click="retry">Повторить</button>
</template>

В этом случае и <p>, и <button> появятся/исчезнут вместе, без лишнего оборачивания в <div>.

Использование с v-for и v-if вместе

Важно понимать, как работают эти директивы в сочетании:

<li v-for="item in items" v-if="item.visible">{{ item.name }}</li>

Такой подход работает, но неэффективен. Лучше использовать фильтрацию заранее:

computed: {
visibleItems() {
return this.items.filter(item => item.visible)
}
}

И затем:

<li v-for="item in visibleItems">{{ item.name }}</li>

Так вы уменьшаете нагрузку на виртуальный DOM и упрощаете отладку.

Пример с авторизацией

<template>
<div>
<AdminPanel v-if="user.role === 'admin'" />
<UserPanel v-else-if="user.role === 'user'" />
<p v-else>Доступ запрещён</p>
</div>
</template>

Динамические классы с v-show

Можно объединять v-show с динамическими классами для управления анимацией или визуальными эффектами:

<div v-show="isExpanded" :class="{ active: isExpanded }">Контент</div>

Условная вставка через JSX/рендер-функции

Если используется render-функция вместо шаблонов, то условный рендеринг выполняется через обычные конструкции JavaScript:

render(h) {
return this.visible ? h('p', 'Привет') : null
}

Примеры реального использования

Прелоадер:

<template>
<div>
<Loader v-if="isLoading" />
<MainContent v-else />
</div>
</template>

Ошибка или контент:

<template>
<template v-if="error">
<ErrorMessage :text="error" />
</template>
<template v-else>
<DataTable :data="items" />
</template>
</template>

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