概述

Vue 中是使用 v-if / v-show 来进行条件渲染的

需要掌握的指令

v-if

• 根据传入的 truthy 值判断组件或者元素是否需要被渲染：

• • 需要渲染：创建元素挂载到指定的渲染位置当中
  • 不需要渲染：删除掉渲染位置上的真实 DOM

v-else

• 渲染最近一个 v-if 为 falsy的内容

• • v-if 为 falsy: 渲染 v-else 包裹的内容到真实 DOM 中
  • v-if 为 truthy : 删除 v-else 包裹的内容

v-else-if

v-else-if 是介于 v-if、v-else 中间渲染的内容。

使用时注意

1. v-if v-else-if v-else 结构上必须"紧挨"在一起；一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。
2. v-if是对DOM节点的移除和添加, 在移除的时候使用注释节点占位
3. 3. v-if对内部的子组件和事件的监听都会销毁和重建 (惰性渲染)

v-show

v-show用来判断元素是否需要显示

• v-show 中的值为 false 时，会给元素添加 display: none的 style；v-show 中的值为 true 时, 会给元素移除掉 display: none
• v-show总是会被渲染

v-if 和 v-else 的对比

• v-if在切换的时候会提高开销, 如果条件为假值, 初始渲染是不会进行的
• v-show在切换的时候开销较低, 但是初始化渲染的时候无论显示与否都会被渲染
• v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销

如何选择v-if/v-show

• 如果需要频繁切换, 需要使用v-show
• 如果不需要频繁切换 / 加载时不需要使用, 使用 v-if