Skip to content

条件渲染

v-if vs v-show

v-if 真实地按照条件渲染,因为它确保条件区块内的事件监听器和子组件都会在切换时被销毁与重建。

v-if 是懒加载的,如果在初次渲染时条件值为 false,则不会做任何事,直到条件首次变为 true 时才会渲染。

v-show 则无论初始条件如何,元素始终会被渲染,仅作 CSS Class 的切换。

总结:v-if 在首次渲染时的切换成本比 v-show 更高。因此需要非常频繁切换时 v-show 会更好,而运行时不常改变的时候 v-if 更合适。

v-if vs v-for

v-ifv-for 位于同一个节点上时,v-ifv-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名:

html
<!--
 这会抛出一个错误,因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

当需要同时使用时,在外新包装一层 <template> 并在其上使用 v-for

html
<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

Released under the MIT License.