简单了解vue中的v-if和v-show的区别


Posted in Javascript onOctober 08, 2019

v-if和v-show的区别是前端面试中常问的基础知识点,v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢?v-if和v-show的区别又是什么呢?

首先我们可以来看一下Vue中文社区说明文档的介绍:

简单了解vue中的v-if和v-show的区别

Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示;

在实际开发中我们会经常使用到v-if和v-show来进行判断展示,我们可以这么理解:

<div class="tc" v-if="pload && list.length<1" >
  <img src="../assets/img/mall_none_order.png" />
</div>

上面的实例中,v-if的作用是通过pload和list.length是否<1来判断这个div是否展示,因为是并且关系,只有当pload和list.length<1两个成立都成立的时候这个div和里面的img才展示和生效,

反之如果判断条件不成立的时候,v-if则不会展示;

<div class="tc" v-show="pload && list.length<1" >
  <img src="../assets/img/mall_none_order.png" />
</div>

上面的案例代码我们其实也可以换成v-show来进行判断,视觉效果也是一样的;注意: 只是视觉效果是一样的,两者之间不是等于的关系(后面来进行分析);用v-show来判断条件pload为真并且list.length<!的时候才成立,div和div里面的img标签才生效;

上面说到v-if和v-show都能实现根据判断条件进行展示的效果,但是这不代表这两者是等于的关系;仅仅只是视觉效果相同而已,下面我们来讲讲v-if和v-show的区别及注意事项:

简单了解vue中的v-if和v-show的区别

使用v-if,我们可以注意到浏览器并没有渲染到元素class为tc的div,这是由于v-if只有当判断条件为真时,浏览器才会生成标签并在浏览中渲染,反之判断条件为假时,浏览器将不会生成标签更不会渲染。

那么我们可以想想,在条件为假的时候浏览器不生成标签不渲染,条件为真的时候浏览器才渲染,这样是不是很消耗页面性能呢?

假如我们的判断条件不只有一种场景而是有多种场景呢?那么这时怎么办呢?Vue给我们提供了v-else指令,v-else是v-if的专属指令,v-else只能和v-if一起连用;

简单了解vue中的v-if和v-show的区别

如果我们使用v-show进行判断渲染,则div标签和里面的img是会生成并渲染的,但是我们注意到浏览器在我们的内联样式中添加了display:none属性,所以实质上v-show标签是存在的,只是浏览器帮我们隐藏了而已;实际上浏览器只是根据判断条件在更改内联样式,条件为真的时候内联样式display:block;条件为假的时候内联样式更改为display:none; v-show实际上比v-if的性能更高,因为v-show只是动态的更改样式而不需要增删DOM元素,但是遇到多种情况分支判断的时候v-show是不能和v-else连用的,碰到这种场景使用v-show的处理办法就是重新再用v-show写另外的逻辑判断;

总结:

(1)、v-if和v-show用于视图层进行条件判断视图展示

(2)、v-if的原理是根据判断条件来动态的进行增删DOM元素,v-show是根据判断条件来动态的进行显示和隐藏元素,频繁的进行增删DOM操作会影响页面加载速度和性能,由此我们可以得出结论:

当您的项目程序不是很大的时候,v-if和v-show都可以用来进行判断展示和隐藏(这种场景使用v-if只是影响不大,并不是没有影响);

当您的项目程序比较大的时候,不推荐使用v-if来进行判断展示和隐藏,推荐使用v-show;

 (3)、只有v-if能和v-else连用进行分支判断,v-show是不能和v-else连用的,如果出现多种条件场景的情况下,可以使用v-if来进行判断

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
vue 中filter的多种用法
Apr 26 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 #Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 #Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 #Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 #Javascript
深入学习Vue nextTick的用法及原理
Oct 08 #Javascript
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
JS跨域代码片段
2012/08/30 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
Javascript中神奇的this
2016/01/20 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
Python中文编码那些事
2014/06/25 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
python交互界面的退出方法
2019/02/16 Python
由面试题加深对Django的认识理解
2019/07/19 Python
ubuntu上安装python的实例方法
2019/09/30 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
django教程如何自学
2020/07/31 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
生产主管岗位职责
2013/11/10 职场文书
倡议书格式模板
2014/05/13 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
端午节活动总结
2014/08/26 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers