v-show для управления видимостью

Директива v-show используется для управления видимостью элемента на странице. В отличие от v-if, который полностью добавляет или удаляет элемент из DOM, v-show оставляет элемент в DOM, меняя только его CSS-свойство display. Это позволяет эффективно переключать видимость без повторного создания и разрушения элементов, что особенно полезно для элементов с тяжелой разметкой или сложной логикой.

Синтаксис директивы прост:

<div v-show="isVisible">Этот блок видим только когда isVisible = true</div>

В данном примере isVisible — это реактивное свойство, которое управляет видимостью блока. Если isVisible равно true, элемент отображается; если false — скрывается через display: none.

Использование с реактивными объектами

Petite-Vue позволяет создавать реактивные объекты с помощью функции createApp и декларации данных:

<div v-scope="{ isVisible: true }">
  <button @click="isVisible = !isVisible">Переключить видимость</button>
  <p v-show="isVisible">Текст видим или скрыт по клику</p>
</div>

Здесь v-scope создаёт локальную область видимости для реактивных свойств. Кнопка переключает значение isVisible, и элемент <p> автоматически обновляет своё состояние.

Особенности работы

• Элемент остаётся в DOM независимо от значения v-show.
• Скрытие происходит через display: none, поэтому все слушатели событий и состояния внутри элемента сохраняются.
• Изменение состояния не приводит к пересозданию компонента, что экономит ресурсы при частых переключениях.

Комбинация с условными операторами

v-show можно комбинировать с логическими выражениями для более сложного управления видимостью:

<p v-show="user.isLoggedIn && user.hasAccess">
  Содержимое доступно только авторизованным пользователям с правами доступа
</p>

Любое выражение, возвращающее булево значение, может использоваться в директиве.

Взаимодействие с классами и стилями

Директива v-show совместима с динамическими классами и стилями:

<p v-show="isVisible" :class="{ 'highlight': isHighlighted }" :style="{ color: textColor }">
  Стили и видимость управляются одновременно
</p>

Даже если элемент скрыт, его классы и стили остаются применёнными в DOM, что может быть полезно для анимаций и переходов.

Практические рекомендации

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

Пример с анимацией

Petite-Vue не предоставляет встроенные директивы анимации, но v-show легко сочетается с CSS-переходами:

<div v-scope="{ isVisible: false }">
  <button @click="isVisible = !isVisible">Показать/Скрыть</button>
  <div v-show="isVisible" class="fade">Контент с плавным появлением</div>
</div>

<style>
.fade {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.fade[style*="display: none"] {
  opacity: 0;
}
</style>

В этом примере изменение display инициирует плавное скрытие и показ элемента через CSS-переход.

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

Использование v-show позволяет эффективно управлять видимостью элементов в интерфейсе без лишней нагрузки на DOM и без потери внутреннего состояния компонентов.