Разница между директивами v-if и v-show в Vue.js заключается в том, как они работают:
- v-if используется для отрисовки блока по условию. 12 Блок будет отображаться только в том случае, если выражение директивы возвращает истинное значение. 2 При этом v-if ленивый: если условие ложно на момент первоначальной отрисовки, он не произведёт никаких действий — условный блок не будет отображён, пока условие не станет истинным. 1
- v-show проще: элемент всегда присутствует в DOM, и только CSS-свойство переключается в зависимости от условия. 1 Если условие в v-show возвращает false, то для элемента устанавливается стиль display:none, и тем самым данный элемент скрывается на веб-странице. 3
Таким образом, если переключения будут частыми, следует использовать v-show, если же редкими или маловероятными — v-if. 1