v-if
v-if
指令用
于条件性的渲染一块内容。这快内容只会在指令的表达式返回true
值的时候被渲染。
<p v-if="flag">我是齐天大圣</p>
data() {
return {
flag: true
}
}
v-else
可以使用v-else
指令来表示v-if
的“else块
<p v-if="flag">我是齐天大圣</p>
<p v-else>我是傻猴子</p>
data() {
return {
flag: true
}
}
v-show
一个用于条件性展示元素的选项是 v-show
指令 。其基本语法都一样
<h1 v-show="flag">哇真的是齐天大圣嘛</h1>
不同之处在于 v-show
会在 DOM 渲染中保留该元素;v-show
仅切换了该元素上名为 display
的 CSS 属性。
v-if
vs v-show
的区别
v-if
是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。
v-if
也是惰性的:如果在初次渲染时条件值为 false
,则不会做任何事。条件区块只有当条件首次变为 true
时才被渲染。
相比之下,v-show
简单许多,元素无论初始条件如何,始终会被渲染,只有 CSS display
属性会被切换。
总的来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show
较好;如果在运行时绑定条件很少改变,则 v-if
会更合适。