条件渲染

v-if

用于条件性的渲染某块内容,只有在指令值为true时才被渲染

v-else

用于v-if的反向条件渲染,只有在v-if为false时才被渲染

v-else-if

用于v-if和v-else之间的条件渲染,只有在v-if为false时才被渲染

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

template上的v-if

v-if必须依附于某一个元素,如果需要将多个元素包裹在一起,可以使用template标签,template标签不会渲染到页面上

为什么是template而不是div?

template标签不会渲染到页面上,而div会渲染到页面上,如果使用div的话,会多出一个div元素,而使用template标签则不会

Vue 的编译器会特别处理 template，将其子节点作为一个整体进行处理。如果使用普通的 div 或其他元素，Vue 需要额外检查它们的子节点是否可以被正确渲染。template 在虚拟 DOM 阶段被优化掉，避免了无意义的 Diff 比对，提升了渲染性能。

在devtools中查看时，你会发现 template 标签被优化掉了，不会出现在最终的 DOM 结构中。

v-if vs v-show

• v-if只有在为true才会被渲染,判断量变化时也会真实的销毁和重建子组件
• v-show不论初始条件增加都会真实的渲染在DOM上,判断量变化时不会设计子组件的销毁和重建,而是通过display: none来隐藏或显示元素

如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-if与v-for

v-if和v-for同时使用在同一个元素上,v-if会首先被执行

推荐: 使用template包裹

<!-- 推荐方案 -->
<template v-for="item in items" :key="item.id">
  <div v-if="item.isActive">{{ item.name }}</div>
</template>