В чем отличия этих двух директив? v-if же просто включает в себя функционал v-show? Может быть сможет кто то объяснить тонкие нюансы и различия этих двух методов)
Разница на самом деле не слишком большая, v-if производит насколько понимаю, более глубокую отрисовку, проверяя всех учасников, то есть уничтожение и воссоздание всех элементов при изменении условия в директиве идет очень чщательно.
Так же следует упомянуть что v-show элемент всегда присутствует в документе, к нему просто прикрепляеться свойство display:none, а вот в случае с v-if элемент просто не отображаеться в html разметке, в общем если элемент частопереключаем то лучше использовать v-show, так как поменять значение свойства display куда проще чем перерисовывать html документ 😊
var vm = new Vue({
el:"#example",
data: {
visib:true
},
methods:{
changeVar: function () {
if (this.visib==true){
vm.visib=false;
}
else{
vm.visib=true;
}
},
}
})
В первом блоке создаем vue экземпляр, задаем свойство видимость (visib) и создаем метод который изменяет значение этого свойства, далее в html:
<div id="example">
<p v-if="visib==false">Блок снизу пропал!
<p v-show="visib==true">Теперь вы не видите блок сверху, даже в DOM!
<button @click="changeVar()">Change
Тут первым создаем v-if блок который отрисовываеться только в случае значения false, затем блок v-show который отрисуется если значение будет true, по кнопке можно менять значение с true на false и наглядно посмотреть на изменения в документе, так же советую открыть панель разработчика, там будет видно как пропадает блок v-if а как v-show.