Vue.js

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

Узнайте как работает условная отрисовка в бесплатном уроке Vue School

# v-if

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

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

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

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

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

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

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

# v-else

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

<div v-if="Math.random() > 0.5">
  Сейчас меня видно
</div>
<div v-else>
  А теперь — нет
</div>
1
2
3
4
5
6

Элемент с директивой 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>
1
2
3
4
5
6
7
8
9
10
11
12

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

# v-show

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

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

Отличия в том, что элемент с 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 и v-for на одном элементе, v-if будет исполняться первым. Подробнее в разделе отрисовки списков.

← Отрисовка списков →