Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює v-if?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-if`** - це директива Vue для умовного рендерингу, яка додає або видаляє елемент з DOM залежно від виразу. **Ключове:** якщо умова істинна, елемент створюється і вставляється в DOM, а якщо хибна - видаляється повністю разом із викликом усіх відповідних хуків життєвого циклу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`v-if` - це директива Vue для **умовного рендерингу**, яка *додає або видаляє елемент з DOM* залежно від виразу. Простіше кажучи: > **Якщо умова істинна - елемент створюється і вставляється в DOM.** > **Якщо хибна - елемент видаляється повністю.** --- ## Як працює `v-if` Приклад: ```html <p v-if="isVisible">Привіт!</p> ``` Якщо `isVisible = true` → Vue створює елемент Якщо `isVisible = false` → елемент видаляється --- ## `v-if`, `v-else-if`, `v-else` ```html <div v-if="status === 'success'">Успіх</div> <div v-else-if="status === 'error'">Помилка</div> <div v-else>Невідомо</div> ``` --- ## Життєвий цикл `v-if` Коли умова змінюється: - Якщо вона переходить **в true**, Vue *створює новий DOM-елемент*, виконує всі хуки (mounted, updated тощо). - Якщо **в false**, Vue *видаляє елемент з DOM*, викликаючи хуки unmounted. Це важливо на співбесіді. --- ## Важливі особливості ### 1. `v-if` **використовується для рідкісного відображення елементів** Наприклад, модалки, важкі списки, складні блоки. Тому що щоразу елемент створюється і знищується → витратніше. --- ### 2. `v-if` **не можна використовувати з** `v-for` **на одному елементі (Vue 3)** Не можна: ```html <div v-for="item in items" v-if="item.visible"></div> ``` Але можна: ```html <template v-for="item in items"> <div v-if="item.visible">{{ item.name }}</div> </template> ``` Або фільтрувати дані заздалегідь. --- ### 3. **Групування через** `<template>` ```html <template v-if="show"> <h1>Заголовок</h1> <p>Текст</p> </template> ``` `<template>` не рендериться в DOM - тільки його вміст. --- ### 4. Відмінності від `v-show` | `v-if` | `v-show` | |---|---| | повністю видаляє/створює вузол | просто приховує через `display: none` | | дорожче за продуктивністю при частих перемиканнях | дорожче при першому рендері | | підходить для рідко відображуваного контенту | підходить для частих перемикань | --- ## Приклад з анімацією (transition + v-if) Vue розуміє enter/leave transitions: ```html <transition> <p v-if="visible">Hello!</p> </transition> ``` Коли `visible` змінюється, Vue запускає CSS-анімацію появи або зникнення.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.