Содержание цикла

1. Article 1
2. Article 2

v-if

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

<script setup>
  const isShow = ref(true);
</script>

<div v-if=»isShow»></div>

v-else

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

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<template>
  <div v-if="show">Const Show is true</div>
  <div v-else>Const Show is false</div>
</template>

v-else-if

Директива позволяет провести проверку по нескольким условиям. Также как и v-else необходимо использовать после v-if

<script setup>
import { ref } from 'vue'
const user = ref({
  username: 'username',
  role: 'user'
})
</script>

<template>
  <div v-if="user.role == 'user'">User role is user</div>
  <div v-else-if="user.role == 'admin'">User role is admin</div>
  <div v-else="user.role == 'guest'">User role is guest</div>
</template>

v-if и <template>

Поскольку v-if – это директива, то она может применяться только с одиночным элементом. Но когда необходимо использовать функционал v-if на нескольких элементах, то эти элементы стоит объединить тэгом <template>

<template v-if=»ok»>
  <div>first element</div>
  <div>second element</div>
</template>

v-else и v-else-if также могут быть использованы на <template>

v-show

Еще одна директива для использования условного отображения это v-show. Ее использование во многом похоже на v-if, единственное отличие заключается в том, что для своего функционирования она применяет стили CSS. Элемент с этой директивой будет всегда отображен в DOM, но либо скрыт или показан при помощи css свойства display. v-show не может использоваться с тэгом <template>.

v-if vs v-show

Только у v-if реальное условное отображение, потому что элемента с этой директивой не существует пока значение директивы не будет true. В отличие от v-if, элемент с v-show всегда отображается в DOM, а переключается у него только css. Поэтому предпочтительней для элементов, которые будут переключаться часто использовать v-show, а для элементов, которые будут переключаться редко – v-if.