DDR爱好者之家

如何区分vue中的v-show 与 v-if
站长资源 2024/12/25 佚名
10 1538
DDR爱好者之家 Design By 杰米

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 的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米