在 Vue.js 2.0 中,条件渲染是通过 v-if、v-else-if 和 v-else 指令来实现的。这些指令可以根据表达式的值来决定是否渲染特定的元素或组件。

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