Условия

v-if

• Принимает: any

Осуществляет отрисовку элемента, только если передаваемое выражение истинно. При изменении значения выражения на противоположное, элемент и содержащиеся в нём компоненты и директивы уничтожаются/пересоздаются. Если элемент — <template>, вместо него будет отрисовано его содержимое.

Эта директива также запускает анимационные переходы при изменении условия.

Директива v-if используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true.

<h1 v-if="awesome">Vue восхитителен!</h1>

Также можно добавить блок «иначе», используя директиву v-else:

<h1 v-if="awesome">Vue восхитителен!</h1>
<h1 v-else>О, нет 😢</h1>

При совместном использовании v-if и v-for, v-for имеет более высокий приоритет

Условные группы с использованием v-if и <template>

Поскольку v-if — директива, она должна быть указана в одном конкретном теге. Если нужно управлять отображением сразу нескольких элементов, то можно применить v-if к псевдоэлементу <template>, который служит невидимой обёрткой и сам в результатах отрисовки не появляется.

<template v-if="ok">
  <h1>Заголовок</h1>
  <p>Абзац 1</p>
  <p>Абзац 2</p>
</template>

v-else

• Не принимает какое-либо выражение

• Ограничение: предыдущий элемент должен иметь директиву v-if или v-else-if.

Определяет «блок else» для v-if или цепочки v-if/v-else-if.

Для указания блока «иначе» для v-if можно использовать директиву v-else:

<div v-if="Math.random() > 0.5">
  Сейчас меня видно
</div>
<div v-else>
  А сейчас — нет
</div>

Элемент с директивой v-else должен следовать сразу за элементом с директивой v-if или v-else-if, иначе он не будет распознан.

v-else-if

• Принимает: any

• Ограничение: предшествующий элемент должен иметь v-if или v-else-if.

v-else-if служит в качестве блока «else if» для директивы v-if. Можно объединять эти директивы в длинные цепочки:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Не A/B/C
</div>

v-show

• Принимает: any

Переключает CSS-свойство display элемента, в зависимости от того, истинно ли указанное выражение.

Ещё одну возможность условного отображения предоставляет директива v-show. Используется она так же:

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

Разница в том, что элемент с v-show будет всегда оставаться в DOM, а изменяться будет лишь свойство display в его параметрах CSS.

v-show не работает на элементе <template> и не работает с v-else.

v-if в сравнении с v-show

v-if производит «настоящую» условную отрисовку, удостоверяясь что подписчики событий и дочерние компоненты внутри блока должным образом уничтожаются и воссоздаются при изменении истинности управляющего условия.

v-if ленивый: если условие ложно на момент первоначальной отрисовки, он не произведёт никаких действий — условный блок не будет отображён, пока условие не станет истинным.

v-show, напротив, куда проще: элемент всегда присутствует в DOM, и только CSS-свойство переключается в зависимости от условия.

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