条件渲染|条件渲染 之 v-if 和 v-show 的区别
vue动态显示DOM元素常用 v-if 和 v-show 这两种方式,但这两种是有区别的:
- v-if:当条件为false时,包含v-if指令的元素,根本就不会存在与dom中
- v-show:当条件为false时,v-show只是给元素添加一个行内样 display:none
区别 | v-if | v-show |
---|---|---|
实现方式 | 动态地向DOM树内添加或者删除 DOM元素 |
设置DOM元素的display样式 属性来控制显隐(display="none") |
编译过程 | 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) | 控制css进行切换 |
编译条件 | 初始值为false就不编译;只有在第一次条件变为真时才开始局部编译 | 在任何条件下(首次条件是否为真)都被编译 |
性能消耗 | 不停的销毁和创建(v-if 的初始化较快,但切换代价高) | 只编译一次,保留DOM元素,之后通过控制css来控制显隐 (v-show 初始化慢,但切换成本低,性能更好) |
使用场景 | 适合仅切换一次或不频繁 切换的场景(应用更广) |
适合频繁 切换的场景(不常用) |
Document - 锐客网 {{message}}{{message}}
eg2:
Document - 锐客网 v-if和v-show都能实现元素的隐藏和显示,但v-if是将元素添加到dom或从dom移除,而v-show是通过为元素添加或移除{display:none}属性来实现隐藏和显示
我有一头小毛驴
我又有一头小毛驴
【条件渲染|条件渲染 之 v-if 和 v-show 的区别】拓展:display:none 和 visible:hidden 都能把网页上某个元素隐藏起来。两者区别为:
- display:none ---使该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
- visible:hidden--- 使对象在网页上不可见,即在网页中不占任何的位置。
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 生活随笔|好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息