国庆节10月1日
--
Vue指令-v-if与v-show
Vue指令-v-if与v-show
AI 摘要- DeepSeek
v-if通过移除DOM节点控制显示，v-show通过CSS display属性切换可见性
Vue指令-v-if与v-show
定义
v-if和v-show都是用于控制元素显示与隐藏的指令，但实现机制不同。v-if通过条件判断创建或移除元素节点，v-show通过CSS的display属性控制显示隐藏。
语法/用法
v-if指令
<!-- 基本用法 --><span v-if="isVisible">显示内容</span>
<!-- v-else-if链式调用 --><span v-if="emp.job === '1'">班主任</span><span v-else-if="emp.job === '2'">讲师</span><span v-else-if="emp.job === '3'">学工主管</span><span v-else-if="emp.job === '4'">教研主管</span><span v-else-if="emp.job === '5'">咨询师</span><span v-else>其他</span>
<!-- v-else --><div v-if="isAdmin">管理员面板</div><div v-else>普通用户面板</div>v-show指令
<!-- 基本用法 --><span v-show="isVisible">显示内容</span>
<!-- 多个条件 --><span v-show="emp.job === '1'">班主任</span><span v-show="emp.job === '2'">讲师</span><span v-show="emp.job === '3'">学工主管</span><span v-show="emp.job === '4'">教研主管</span><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的优先级更高
- 不推荐在同一元素上同时使用
相关链接
评论区
[ 标签 ]
[ 分类 ]
[ 公告 ]
如果你喜欢，那么欢迎来到我的世界！
了解更多[ 音乐 ]
音乐
暂未播放
0:000:00
找不到相关结果。
[ contents ]
[ 全部文章 ]
