如何区分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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
JQuery 学习技巧总结
May 21 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
javascript三种代码注释方法
Jun 02 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
vue组件开发props验证的实现
Feb 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实现的树形结构数据存取类实例
2014/11/29 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
简单谈谈axios中的get,post方法
2017/06/25 Javascript
详解vue中axios的封装
2018/07/18 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
Python 模拟购物车的实例讲解
2017/09/11 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
pytorch 模型可视化的例子
2019/08/17 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python reversed函数及使用方法解析
2020/03/17 Python
用python写PDF转换器的实现
2020/10/29 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
小班秋游活动方案
2014/02/22 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
感恩主题班会教案
2015/08/12 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS