> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/basics/untitled.md).

# Условия

## v-if

* **Принимает:** `any`

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

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

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

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

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

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

{% hint style="info" %}
При совместном использовании **`v-if`** и **`v-for`**, **`v-for`** имеет более высокий приоритет&#x20;
{% endhint %}

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

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

```markup
<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`:

```markup
<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`. Можно объединять эти директивы в длинные цепочки:

```markup
<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`. Используется она так же:

```javascript
<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`.