v-show

Есть и вторая директива для показа и скрытия: v-show. Записывается она так же, как v-if:

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

const showHours = ref(false);
</script>

<template>
    <button @click="showHours = !showHours">Часы работы</button>
    <p v-show="showHours">Каждый день с 7:00 до 19:00.</p>
</template>

Но работает иначе. Элемент всегда есть на странице, а v-show лишь скрывает его с помощью CSS display: none. До первого нажатия на странице вот что:

<button>Часы работы</button>
<p style="display: none;">Каждый день с 7:00 до 19:00.</p>

Нажатие меняет только стиль абзаца. С v-if абзаца на странице не было бы вовсе, остался бы только комментарий, который отмечает его место, <!--v-if-->, а каждое нажатие создавало бы абзац заново или удаляло его.

Что выбрать? В основном v-if. v-show нужен для того, что показывают и скрывают часто, например для меню, которое открывается и закрывается: поменять стиль быстрее, чем создавать элемент заново. Но у v-show нет v-else, а скрытый элемент всё равно отрисовывается, даже если на него никто не смотрит.