vue中的v-if与v-show的细节分析

v-if在上篇文章中讲到当v-if的索引条件为false时，是删除当前节点。

而这篇文章将要讲到的是v-show。

v-show的特点在于它是利用display来进行显示或者隐藏的，也就是说当节点消失时，在客观还是存在的，只不过主观上不在而已。

下面我们来看一个小案例：

<div id="app">
    <div v-show="ok">三仟</div>
    <div v-show="no">墨染</div>
</div>

var app = new Vue({
	el:'#app',
	data:{
       ok:true,
       no:false
	},
})

如第一张图我们可以看出在当前情况下页面显示的是“三仟”，如果在no也为true时页面则会显示“三仟”与“墨染”。

 

这时候我们可以看到，没有显示的“墨染”其实是以display:none的方式上客观存在的。

以上就是v-show的小细节啦，本次分享到此结束咯！