简单了解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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Node调用Java的示例代码
Sep 20 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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高自定义性安全验证码代码
2011/11/27 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
webpack4.x打包过程详解
2018/07/18 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Vue性能优化的方法
2020/07/30 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python异常处理操作实例详解
2018/08/28 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
旷课检讨书范文
2014/10/30 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python