Vue. Директива v-show

Знакомство с директивой v-show

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

Например, можно написать следующее выражение:

<div v-show="loading">Загрузка</div>

Если условие будет возвращать false, в разметке документа мы увидим следующий блок:

<div style="display:none;">Загрузка</div>

Т.е. в разметке документа этот документ остается даже при ложном условии. В отличии от v-if, который полностью убирает документ из разметки при ложном условии.

Когда нужно использовать v-if, а когда v-show?

Если вам нужно, чтобы при исчезновении элемента со страницы, он у нас оставался в DOM разметке, то вам нужно использовать свойство v-show.

Еще один важный момент, что для v-show мы не можем использовать такие конструкции, как v-else или v-else-if. v-show с этим не взаимодействует.

v-show хорошо использовать, например, с такими элементами, как аккордеон, выпадающие вкладки и др., которые важно оставлять для SEO, чтобы SEO обрабатывало эти блоки в любом их состоянии. 

v-if же - это просто логика, которая убирает элементы с веб-страницы.

Это нужно иметь ввиду при работе с такой директивой как v-show.