Что делает эта директива? И зачем она по сути, если в vue есть директива v-if, она же по сути делает то же самое что и v-show?
Эта директива так же как и директива v-if предоставляет возможность условно отображать элементы, то есть при определенном условии показывать элемент, и точно так же при не соблюдении этого условия скрывать элемент. Вот пример работы данной директивы:
var vm = new Vue({
el:"#block",
data: {
choose:'false'
}
})
В первом блоке создаем объект vue, по id прикрепляем его к блоку html, далее задаем свойство choose при изменении значения которого мы будем отображать или скрывать определенные блоки.
<div id="block">
<p v-if="choose=='true'">Here it is:
<p v-else>Here is invisible block:
<div v-show="choose=='true'">Here i am!!!!!!!
<button id="yes" @click="choose='true'">Show
<button id="no" @click="choose='false'">Dont show
В html с помощью директивы v-if создаем блок который будет выводиться только при условии что значение choose равно строковому значению ‘true’, так же сразу задаем v-else, альтернативую ветку, то же самое делаем в директиве v-show, далее создаем две кнопки, одна задает choose значение ‘true’ другая ‘false’. Разница насколько знаю в том что v-show прячеться при помощи display:none, а v-if вообще убираеться из DOM и его даже в панели разработчика не видно, в то время как блок с директивой v-show видно, и ему вполне можно поменять значение display обратно)