如何区分vue中的v-show 与 v-if
1.v-show
不管初始的条件是什么，元素总是会被渲染，并且只是简单的基于CSSdisplay:none或者display:block的属性进行切换。
2.v-if
会根据初始的条件（data里自己的定义的数据）来进行真正的渲染（组件真正的销毁和重建），如果条件为真，才会开始渲染条件块，如果条件为假，则不会渲染条件块。
注意：v-if不要和v-for一起使用！
当和v-for一起使用时，v-for的优先级比v-if更高，详见vue官网关于v-for的详细描述，为什么不能一起使用，以下我用代码来解释一下。
- {{item.name}}
以上代码将会经过如下运算
this.list.map(user=>{
if(isActive){
returnuser.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的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。