Условная отрисовка ​

v-if ​

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

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

v-else ​

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

<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 служит в качестве блока «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-else, v-else-if должен следовать сразу за элементом с v-if или v-else-if.

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

Поскольку v-if является директивой, то она должна быть указана на одном элементе. Но что если потребуется управлять отображением сразу нескольких элементов? В этом случае можно использовать v-if на элементе <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, а переключаться будет лишь его 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 будет исполняться первым. Подробнее в разделе отрисовки списков.