Умовний рендеринг ​

v-if ​

Директива v-if використовується для умовного рендерингу блоку. Блок буде згенеровано лише якщо вираз у директиві повертає правдиве значення.

<h1 v-if="awesome">Vue — це круто!</h1>

v-else ​

Ви можете використовувати директиву v-else для вказування "блоку інакше" для v-if:

<button @click="awesome = !awesome">Перемкнути</button>

<h1 v-if="awesome">Vue — це круто!</h1>
<h1 v-else>Ой, ні 😢</h1>

Елемент з v-else повинен йти безпосередньо за елементом з v-if або елементом з v-else-if — в іншому випадку їх не буде розпізнано.

v-else-if ​

v-else-if, як і підказує його назва, слугує в якості "блоку інакше якщо" для v-if. Може бути також і ланцюжок таких елементів:

<div v-if="type === 'А'">
  А
</div>
<div v-else-if="type === 'Б'">
  Б
</div>
<div v-else-if="type === 'В'">
  В
</div>
<div v-else>
  Не А/Б/В
</div>

Подібно до v-else, елемент з v-else-if повинен йти безпосередньо за v-if або за елементами з v-else-if.

v-if в <template> ​

Оскільки v-if є директивою, вона має бути додана до одиничного елементу. Але що робити у випадку, коли ми хочемо перемикати більше, ніж один елемент? У такому разі ми можемо використовувати v-if в елементі <template>, який слугує невидимою обгорткою. Фінальний результат рендеру не міститиме <template>.

<template v-if="ok">
  <h1>Заголовок</h1>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
</template>

Директиви v-else та v-else-if також можуть використовуватись в <template>.

v-show ​

Ще однією можливістю для умовного показу елементу є директива v-show. Використання по своїй суті аналогічне:

<h1 v-show="ok">Привіт!</h1>

Різниця полягає в тому, що елемент з v-show буде завжди згенерований і лишатиметься в DOM, адже v-show лише перемикає CSS властивість display елемента.

Варто зазначити, що v-show не підтримується елементом <template>, та не працює з v-else.

v-if проти v-show ​

v-if впливає на "справжній" рендеринг, забезпечуючи, під час перемикання, належне видалення та створення слухачів подій та дочірніх елементів всередині блоків.

v-if також є лінивим: якщо умова є неправдивою при початковому рендері, він нічого не робитиме — умовний блок не буде згенерований, доки умова вперше не стане правдивою.

v-show у порівнянні — елемент завжди згенерований попри початкову умову, завдяки перемиканню лише CSS властивостей.

В цілому, v-if має вищу вартість під час перемикання, коли v-show має вищу вартість під час початкового рендерингу. Тому надавайте перевагу v-show, якщо вам потрібно перемикати щось часто, та v-if, якщо умова навряд чи змінюватиметься під час виконання програми.

v-if з v-for ​

Коли обидва v-if та v-for використовуються на тому ж елементі, v-if буде обчисленим першим. Перегляньте Гід по рендерингу списків для деталей.