Vue指令-v-if与v-show

2026-05-15

编程学习

前端

Vue

浏览量加载中...

AI 摘要

Vue指令-v-if与v-show#

定义#

v-if和v-show都是用于控制元素显示与隐藏的指令，但实现机制不同。v-if通过条件判断创建或移除元素节点，v-show通过CSS的display属性控制显示隐藏。

语法/用法#

v-if指令#

1
<!-- 基本用法 -->
2
<span v-if="isVisible">显示内容</span>
3

4
<!-- v-else-if链式调用 -->
5
<span v-if="emp.job === '1'">班主任</span>
6
<span v-else-if="emp.job === '2'">讲师</span>
7
<span v-else-if="emp.job === '3'">学工主管</span>
8
<span v-else-if="emp.job === '4'">教研主管</span>
9
<span v-else-if="emp.job === '5'">咨询师</span>
10
<span v-else>其他</span>
11

12
<!-- v-else -->
13
<div v-if="isAdmin">管理员面板</div>
14
<div v-else>普通用户面板</div>

v-show指令#

1
<!-- 基本用法 -->
2
<span v-show="isVisible">显示内容</span>
3

4
<!-- 多个条件 -->
5
<span v-show="emp.job === '1'">班主任</span>
6
<span v-show="emp.job === '2'">讲师</span>
7
<span v-show="emp.job === '3'">学工主管</span>
8
<span v-show="emp.job === '4'">教研主管</span>
9
<span v-show="emp.job === '5'">咨询师</span>

常见场景#

v-if适用场景：
- 条件不经常变化
- 初始渲染条件为false时不需要渲染
- 需要配合v-else或v-else-if使用
- 性能要求不高，但需要完全销毁/重建元素
v-show适用场景：
- 条件频繁切换
- 初始渲染成本较高
- 只需要简单的显示/隐藏切换
- 需要保持元素状态（如表单输入）

注意事项#

实现机制差异：
- v-if：条件为false时，元素从DOM中移除
- v-show：条件为false时，元素通过display: none隐藏
性能考虑：
- v-if有更高的切换开销（创建/销毁）
- v-show有更高的初始渲染开销（总是渲染）
- 频繁切换用v-show，运行时条件很少改变用v-if
v-else规则：
- v-else必须紧跟在v-if或v-else-if之后
- v-else-if必须出现在v-if之后
- 可以有多个v-else-if
与v-for一起使用：
- 不推荐在同一元素上同时使用v-if和v-for
- 需要时，v-if的优先级更高