如何区分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 相关文章推荐
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
VsCode里的Vue模板的实现
Aug 12 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
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
用cssText批量修改样式
2009/08/29 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python实现数组插入新元素的方法
2015/05/22 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python实现自动访问网页的例子
2020/02/21 Python
10个顶级Python实用库推荐
2021/03/04 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
职位说明书范文
2014/05/07 职场文书
市场策划求职信
2014/08/07 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
教师个人教学反思
2016/02/23 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
go语言中json数据的读取和写出操作
2021/04/28 Golang