Vue入门教程--v-if与v-show属性的使用详解（article:8）

Vue.js 初步入门

---

属性介绍

v-if ：对传入值进行判断，true则向用户显现元素，false则隐藏起来
v-show ：对传入值进行判断，true则向用户显现元素，false则隐藏起来

v-if & v-show 使用详解

v-if顾名思义是用来做判断是否让元素显示的属性，而vue也提供了另一种v-show来用不同的方式实现这一功能。

data:{
	hello:"hello vue.js",
	flag:true
}

<div id="container">
	<button type="button" @click="flag=!flag">切换</button>
	<p v-if="flag">{{hello}}</p>
	<p v-show="flag">{{hello}}</p>
</div>

以上的两个p标签的随button点击事件的渲染效果时一样的，是true共同出现，是false共同消失。
但打开控制台就会发现，二者的消失方式却大相径庭。

显而易见，用v-if修饰的标签值为false时标签被彻底删了，而用v-show修饰的标签值为false是则会修改标签的样式中的display值为none，这就有质的区别了。

Tip

在元素频繁的被显示和隐藏的场景下，v-if属性值为true则会创建元素，为false则会删除元素，这样会产生切换性能消耗。同样，v-show每次对元素的重新渲染也会产生初始渲染消耗。

如果元素需要进行频繁的切换，推荐使用v-show，而尽量不要使用v-if
如果元素几乎不被显示出来让用户看到，则推荐使用v-if

---