如何区分vue中的v-show 与 v-if


Posted in Javascript onSeptember 08, 2020

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 的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
JS中Array数组学习总结
Jan 18 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
通过实例了解JS 连续赋值
Sep 24 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
谈谈JavaScript中的函数
Sep 08 #Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 #Javascript
浅析JavaScript 函数柯里化
Sep 08 #Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 #Javascript
JavaScript 事件代理需要注意的地方
Sep 08 #Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 #Javascript
详解JavaScript的this指向和绑定
Sep 08 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
thinkphp的c方法使用示例
2014/02/24 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
用JS实现的一个include函数
2007/07/21 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
季度思想汇报
2014/01/01 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
防沙治沙典型材料
2014/05/07 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
文案策划岗位职责
2015/02/11 职场文书
七年级思品教学反思
2016/02/20 职场文书