vue中的v-if和v-show的区别详解


Posted in Javascript onSeptember 01, 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 指南/入门基础
Nov 30 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
react中Suspense的使用详解
Sep 01 #Javascript
vue 实现微信浮标效果
Sep 01 #Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 #Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 #Javascript
vue动态子组件的两种实现方式
Sep 01 #Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 #Javascript
简单分析js中的this的原理
Aug 31 #Javascript
You might like
长波知识介绍
2021/03/01 无线电
php mysql数据库操作分页类
2008/06/04 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
django 自定义用户user模型的三种方法
2014/11/18 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python和go语言的区别是什么
2020/07/20 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
小学家长会邀请函
2014/01/23 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
如何利用pygame实现打飞机小游戏
2021/05/30 Python