Ответ
v-if и v-show управляют видимостью элементов, но работают по-разному:
-
v-if:
- Полностью удаляет/добавляет элемент из DOM
- Ленивый: элементы внутри не рендерятся, пока условие не станет true
- Подходит для редко меняющихся условий
-
v-show:
- Всегда рендерит элемент в DOM, просто переключает
display: none - Подходит для частых переключений (лучше для производительности)
- Не поддерживает
<template>иv-else
- Всегда рендерит элемент в DOM, просто переключает
Пример:
<div v-if="isVisible">Удалится из DOM</div>
<div v-show="isVisible">Спрячется через CSS</div>Выбор зависит от частоты переключений и важности начального рендеринга.
Ответ 18+ 🔞
А, слушай, смотри, вот есть две штуки — v-if и v-show. Вроде одно и то же делают, показывают-прячут, а на деле, блядь, разница — хуй с горы!
v-if — это, сука, максималист. Либо всё, либо нихуя. Если условие не прошло, он этот элемент из DOM просто выпиливает, нахуй. Совсем. Как будто его и не было. И самое главное — он ленивый, как мой кот сука собака. Пока условие не станет true, он даже не будет пытаться его рендерить, экономит силы. Идеально, если элемент появляется-исчезает редко.
v-show — это хитрая жопа. Он элемент ВСЕГДА в DOM рисует, заранее. А потом просто, как мартышлюшка, играет со стилями: display: block или display: none. Переключения у него — раз плюнуть, поэтому если тебе надо что-то мигать как стробоскоп — это твой выбор, производительность ебать овердохуища.
Вот, смотри на код, тут всё понятно:
<div v-if="isVisible">Меня могут стереть ластиком из DOM</div>
<div v-show="isVisible">А я всегда тут, просто притворяюсь невидимкой через CSS</div>Короче, выбирай по обстановке:
- v-if — для тяжёлых компонентов, которые редко показываются. Зачем им висеть в памяти, если не нужны?
- v-show — для простых переключалок, которые дергаются каждую секунду. Тут уже
v-ifбудет тормозить, создавая-удаляя всё по новой, ёпта.
И да, v-show с <template> не дружит и v-else не понимает, так что не пытайся, блядь, это впихнуть — невпихуемое.