v-if и v-else

Как вы знаете из урока «Синтаксис шаблонов», внутрь {{ }} нельзя поставить if. Чтобы показать элемент только при выполнении условия, дайте ему директиву v-if:

<script setup>
import { ref } from "vue";

const open = ref(true);
</script>

<template>
    <h1>Кафе «Уголок»</h1>
    <p v-if="open">Заходите, мы открыты!</p>
    <p v-else>Извините, мы закрыты.</p>
    <button @click="open = !open">Перевернуть табличку</button>
</template>

Пока open равно true, на странице есть первый абзац. Нажмите на кнопку — и Vue удалит его и поставит на его место второй: v-else показывает свой элемент, когда не показан элемент с v-if перед ним. Между ними может стоять любое число v-else-if, у каждого своё условие:

<p v-if="hour < 7">Мы открываемся в 7 утра.</p>
<p v-else-if="hour < 19">Мы открыты до 19:00.</p>
<p v-else>Мы закрыты. До завтра!</p>

Vue проверяет условия сверху вниз и показывает только первый элемент, условие которого истинно, — так же, как работают if, else if и else в JavaScript. В 9 часов это второй элемент. Если ни одно условие не выполнено и v-else нет, не показывается ни один из них.

Элемент, у которого v-if ложно, не скрыт: его на странице просто нет. Vue создаёт элемент, когда условие становится истинным, и удаляет, когда оно снова становится ложным.

Типичная ошибка: элемент посередине. v-else-if и v-else должны стоять на элементе сразу после v-if или v-else-if. Если между ними окажется другой элемент, страница не запустится, а красная полоса под предпросмотром назовёт строку с v-else и напишет v-else/v-else-if has no adjacent v-if or v-else-if.