Vue的条件渲染详解
Vue的条件渲染
v-if
、v-else
、v-else-if
以及v-show
的用法
-
v-if
的渲染方式:- 会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;
- 只有当条件第一次变为真时,才会开始渲染条件块;
- 切换开销比
v-show
高;
-
v-show
的渲染方式:- 不管初始条件是什么,元素总是会被渲染;
- 只是简单地基于 CSS 进行切换;
v-show
的初始渲染开销比v-if
高;
如果需要频繁的切换,则使用
v-show
;如果运行时条件很少改变,则用
v-if
;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好</div> <div v-else-if='score<80&&score>60'>一般</div> <div v-else>比较差</div> <div v-show='flag'>测试v-show</div> <button v-on:click='handle'>点击</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 分支结构 v-show的原理:控制元素样式是否显示 display:none */ var vm = new Vue({ el: '#app', data: { score: 80, flag: false }, methods: { handle: function(){ this.flag = !this.flag; } } }); </script> </body> </html>
作者:apebro
出处:https://www.cnblogs.com/apebro/p/12602352.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)