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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
javascript数组详解
Oct 22 Javascript
理解jQuery stop()方法
Nov 21 Javascript
Javascript中For In语句用法实例
May 14 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
Vue函数式组件-你值得拥有
May 09 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
php实现多张图片上传加水印技巧
2013/04/18 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
基于python操作ES实例详解
2019/11/16 Python
python实现简易淘宝购物
2019/11/22 Python
python 实现线程之间的通信示例
2020/02/14 Python
django从后台返回html代码的实例
2020/03/11 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
什么是SCM(软件配置管理)
2014/08/16 面试题
工地门卫岗位职责
2013/12/30 职场文书
室内趣味活动方案
2014/08/24 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
外出学习心得体会范文
2016/01/18 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
python pygame 开发五子棋双人对弈
2022/05/02 Python