在Vue中,我们可以使用v-if和v-show来控制元素或模板的渲染,而v-if和v-show也属于Vue的内部常用的指令(条件渲染)。
v-if 和 v-show 都是通过判断绑定数据的true\false来展示的
简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低
本质的区别
v-show 本质就是标签display设置为none,控制隐藏
v-if 是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show 其实就是在控制css
v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show 都会编译,初始值为false,只是将display设为none,但它也编译了。
v-if 初始值为false,就不会编译了。
性能的区别
v-show 只编译一次,后面其实就是控制css。
v-if 不停的销毁和创建。
用法的区别
v-if 更适合于带有权限的操作,渲染时判断权限数据,有则展示该功能,没有则删除。v-show 更适合于日常使用,可以减少数据的渲染,减少不必要的操作。
v-if 有配套的 v-else-if 和 v-else,而 v-show 没有
v-if 可以搭配 template 使用,而 v-show 不行
——
更多内容请参见原文 :https://m.php.cn/article/416742.html