vue if指令实现

Vue 的 v-if 指令

v-if 是 Vue 中用于条件渲染的指令，根据表达式的真假值决定是否渲染 DOM 元素。

基本用法

<div v-if="isVisible">这段内容会根据 isVisible 的值显示或隐藏</div>

与 v-else 搭配

<div v-if="isActive">活跃状态</div>
<div v-else>非活跃状态</div>

与 v-else-if 搭配

<div v-if="type === 'A'">类型 A</div>
<div v-else-if="type === 'B'">类型 B</div>
<div v-else>其他类型</div>

在 <template> 上使用

可以控制多个元素的渲染：

<template v-if="showGroup">
  <div>元素1</div>
  <div>元素2</div>
</template>

与 key 属性结合

当需要强制重新渲染元素时：

<div v-if="show" key="unique-key">内容</div>

注意事项

• v-if 是真正的条件渲染，元素会被销毁和重建
• 切换开销较大，适合运行时条件很少改变的情况
• 频繁切换的场景建议使用 v-show
• 避免在同一元素上同时使用 v-if 和 v-for，应先处理 v-for 再用 v-if 过滤

与 v-show 的区别

v-show 只是切换 CSS 的 display 属性，元素始终会被渲染：

<div v-show="isVisible">这个元素始终存在，只是显示/隐藏</div>

性能考虑

• v-if 有更高的初始渲染开销
• v-show 有更高的初始渲染成本但切换开销低
• 需要根据具体场景选择合适的指令