v-if
v-if 指令用于根据表达式的真假条件判断是否渲染元素。
<div v-if="seen">Now you see me</div>
在这个例子中,当 seen 的值为 true 时,<div> 元素会被渲染到 DOM 中。
v-else-if 和 v-else
v-else-if 和 v-else 用于在 v-if 指令之后添加额外的条件。
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Type Other</div>
在这个例子中,根据 type 的不同值,会渲染不同的提示信息。
使用 v-show 进行简单的显示/隐藏
除了 v-if,Vue.js 还提供了 v-show,它用于简单的显示和隐藏元素。与 v-if 不同的是,v-show 始终将元素渲染到 DOM 中,只是通过 CSS 的 display 属性来控制元素的可见性。
<p v-show="isVisible">This is visible.</p>
在这个例子中,当 isVisible 为 true 时,<p> 元素会显示,否则会隐藏。
使用 v-if 和 v-show 的选择
- 如果元素在运行时很少改变,使用 v-if 会有更高的切换开销,因为它会真正地销毁和重新创建元素。
- 如果元素频繁切换,使用 v-show 会更为合适,因为它只是切换 CSS 的 display 属性,不会销毁和重新创建元素。
总的来说,v-if 是在切换开销相对较高的情况下使用的,而 v-show 是在切换开销相对较低的情况下使用的。
转载请注明出处:http://www.zyzy.cn/article/detail/4800/Vue