尚硅谷的vue旅程07-vue中的条件渲染(v-if和v-show)

v-if和v-show的比较

对比项	指令	本质区别
v-if	v-if 与 v-else搭配使用	通过 新建/移除 标签元素 来达到显示/隐藏的效果
v-show	v-show	通过更新display属性来达到显示/隐藏的效果

  v-show 更换适用于频繁切换的情况
    相比于v-if，大大减少了内存开销

代码示例

<div id="app">
	<!-- v-if -->
	<p v-if="isOK">成功了</p>
	<p v-else>失败了</p>
	<!-- v-show -->
	<p v-show="isOK">表白成功</p>
	<p v-show="!isOK">表白失败</p>
	
	<button @click="isOK=!isOK">更换</button>
</div>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	new Vue({
		el:"#app",
		data:{
			isOK: true
		}
	})
<script>

使用v-show指令的标签 – 游览器后台展示