v-if
v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
v-show
v-show与v-if的用法大致一样
<h1 v-show="ok">Hello!</h1>
v-if与v-show的区别
v-if控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也是就页面中不存在这个dom元素,以达到隐藏的效果。并且v-if是惰性的,如果初始渲染条件为假时,那就什么也不做,直到条件第一次变为真时,需要渲染时才会开始渲染条件快。v-if在每次切换的时候都会重新创建或者销毁元素,有比较高的切换性能消耗。如果很少用到切换,或者元素可能永远都不会显示出来,使用v-if。
v-show则无论初始条件是什么,元素都会进行渲染,就是dom元素始终是存在的,v-show只是通过控制CSS中的display属性来隐藏控制他的显示或隐藏block为显示,none为隐藏。有比较高的初始渲染消耗。所以元素需要进行比较频繁的切换的话,推荐使用v-show。