如何区分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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
谈谈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
zend framework多模块多布局配置
2011/02/26 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python逆向入门教程
2018/01/15 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python支付宝支付示例详解
2019/08/22 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python流程控制常用工具详解
2020/02/24 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
c++工程师面试问题
2013/08/04 面试题
个人授权委托书范文
2014/09/21 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python