如何区分vue中的v-show 与 v-if
1. v-show
不管初始的条件是什么,元素总是会被渲染,并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。
2. v-if
会根据初始的条件(data里自己的定义的数据)来进行真正的渲染(组件真正的销毁和重建),如果条件为真,才会开始渲染条件块,如果条件为假,则不会渲染条件块。
注意: v-if不要和v-for一起使用!
当和 v-for 一起使用时,v-for 的优先级比 v-if 更高,详见 vue官网关于 v-for 的详细描述 ,为什么不能一起使用,以下我用代码来解释一下。
<ul> <li v-for = "(item, index) in list" v-if = "isActive" :key = "item.id" > {{ item.name }} </li> </ul>
以上代码将会经过如下运算
this.list.map( user=> { if (isActive) { return user.name } })
因此,哪怕我们只渲染一小部分元素,也得在每次重新渲染的时候遍历整个列表,不论 isActive
是否发生了变化。如果 list
的数据有很多,就会造成性能低,页面可能卡顿的现象出现。
总结
共同点:
v-if和v-show都是通过判断绑定数据的true\false来展示的
不同点:
v-if只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。
用法推荐:
v-if更适合于带有权限的操作,渲染时判断权限数据,有则展示该功能,没有则删除。
v-show更适合于日常使用,可以减少数据的渲染,减少不必要的操作。
综上,v-if 有更高的切换消耗,而 v-show 有更高的初始渲染消耗。
因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变,更倾向功能权限性的话 v-if 较好。
以上就是如何区分vue中的v-show 与 v-if 的详细内容,更多关于v-show 与 v-if 的资料请关注脚本之家其它相关文章!
相关文章
vue.js动态设置VueComponent高度遇到的问题及解决
这篇文章主要介绍了vue.js动态设置VueComponent高度遇到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08vue this.$router.go(-1);返回时如何带参数
这篇文章主要介绍了vue this.$router.go(-1);返回时如何带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12element UI中el-dialog实现拖拽功能示例代码
我们在开发中常会遇见拖拽的功能,下面这篇文章主要给大家介绍了关于element UI中el-dialog实现拖拽功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12axios请求中以params或body形式传递参数的区别浅析
最近在做自己项目中,做一个非常简单的新增用户场景,但是使用原生axios发送post请求的时候,还是踩了不少坑的,下面这篇文章主要给大家介绍了关于axios请求中以params或body形式传递参数的区别的相关资料,需要的朋友可以参考下2023-04-04vue/react项目刷新页面出现404报错的原因及解决办法
Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下2023-05-05
最新评论