简单了解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与css打造个性化的单选框和复选框
Oct 20 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
ES6函数实现排它两种写法解析
May 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
PHP获取数组的键与值方法小结
2015/06/13 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python发送邮件接收邮件示例分享
2014/01/21 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python实现textrank关键词提取
2018/06/22 Python
Django web框架使用url path name详解
2019/04/29 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
职专应届生求职信
2013/11/16 职场文书
财务管理专业求职信
2014/06/11 职场文书
道德模范事迹材料
2014/12/20 职场文书
颐和园的导游词
2015/01/30 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书