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

v-if

Директива v-if предназначена для отрисовки HTML-блока при условии, что значение выражения истинно (true). Это означает, что пустой массив, объект и непустая строка будут приведены к true. Например:

<div v-if="[]">Этот блок будет отрисован, так как !![] === true</div>
<div v-if="''">Этот блок не будет отрисован, так как !!'' === false</div>

При рендеринге компонента все элементы с v-if="false" будут пропущены и не окажутся в DOM.

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

v-else

Директива v-else используется совместно с v-if или v-else-if:

<div v-if="type === 'A'">
  A
</div>

<div>
  Другой контент вне условий
</div>

<!-- v-else здесь распознан не будет -->
<div v-else>
  Не A
</div>

v-else-if

v-else-if выступает дополнительным блоком для v-if. После v-if допускается произвольное количество блоков v-else-if:

<div v-if="block === 'first'">
  Первый блок
</div>
<div v-else-if="block === 'second'">
  Второй блок
</div>
<div v-else-if="block === 'third'">
  Третий блок
</div>
<div v-else>
  Другой блок
</div>

Использование элементов с помощью key

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

В приведённом выше примере вместо четырёх отдельных div будет задействован один. Чтобы избежать такого поведения и обеспечить независимость элементов, каждому из них назначается уникальный атрибут key:

<div
  v-if="block === 'first'"
  key="a-div"
>
  Первый блок
</div>
<div
  v-else-if="block === 'second'"
  key="b-div"
>
  Второй блок
</div>
<div
  v-else-if="block === 'third'"
  key="c-div"
>
  Третий блок
</div>
<div
  v-else
  key="else-div"
>
  Другой блок
</div>

В таком случае div не будет переиспользован. При смене условия один div заменится другим.

v-show

<div v-show="showElement">
  A
</div>

v-show также служит для условного отображения элементов. Однако в отличие от v-if, элемент с v-show всегда присутствует в DOM-дереве. Когда он скрыт, ему назначается стиль display: none;.

Начальная стоимость загрузки у v-show выше, однако переключение видимости выполняется быстрее.

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

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

v-if:

Осуществляет полноценную условную отрисовку, при которой обработчики событий и дочерние компоненты внутри блока добавляются или удаляются вместе со сменой условия.
Ленивый: если при начальной отрисовке условие равно false, ничего не произойдёт. Блок не появится в DOM до тех пор, пока условие не станет true.

v-show:

Элемент всегда отрисовывается в DOM. Видимость регулируется CSS-свойством display в зависимости от условия.
Элемент сразу присутствует в DOM. Если условие равно false, он скрывается через display: none;.

Директива v-if может быть выгодна для начальной загрузки, так как содержимое не попадает в DOM. С точки зрения производительности переключение v-if обходится дороже, тогда как v-show дороже при первичной отрисовке.

Что использовать. При частых переключениях видимости предпочтительнее v-show. В остальных ситуациях можно выбрать v-if.