您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页Vue中v-show和v-if的区别

Vue中v-show和v-if的区别

来源:伴沃教育

vue动态显示DOM元素常用两种方式:v-show 和 v-if,但这两种是有区别的。

区别 v-if v-show 备注
实现方式 动态地向DOM树内添加或者删除DOM元素 设置DOM元素的display样式属性来控制显隐(display="none") -
编译过程 切换有一个局部编译/卸载的过程(切换过程中合适地销毁和重建内部的事件监听和子组件) 控制css进行切换 -
编译条件 初始值为false就不编译;只有在第一次条件变为真时才开始局部编译 在任何条件下(首次条件是否为真)都被编译 -
性能消耗 不停的销毁和创建 只编译一次,保留DOM元素,之后通过控制css来控制显隐 v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低(v-show性能更好一点)
使用场景 适合条件不大可能改变 适合频繁切换 v-if更灵活

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务