v-if和v-show的区别

硅谷探秘者 vue 335 0 0

一. v-show与v-if的共同点

在 vue 中 v-show 与 v-if 的作用效果是相同的(不含v-else),都能控制元素在页面是否显示 。

当表达式都为 false 时,都不会占据页面位置
当表达式结果为 true 时,都会占据页面的位置

二、v-show与v-if的区别

  • 控制手段不同
  • 编译过程不同
  • 编译条件不同
  1. 控制手段:v-show隐藏则是为该元素添加css—display:none,dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

  2. 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换

  3. 编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候,触发组件的beforeCreate、create、beforeMount、mounted钩子,由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

三、v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的(直接操作dom节点增加与删除)

如果需要非常频繁地切换,则使用 v-show 较好

如果在运行时条件很少改变,则使用 v-if 较好

猜你喜欢
javascript,前端 424 jsjavascriptforinforof,forof遍历原理 一、 forin是ES5语法,forof是ES6语法forin是无序遍历数组或对象,也就是随机遍历,不按照顺序来
weblog 3813 vue使用v-for遍历数组遍历对象splic(...)方法使用请参考:http://www.jiajiajia.club/blog/artical/262!DOCTYPEhtmlhtml
weblog 2997 String类实现及其不可变性 对于String类实现从源码中可以看出,String类底层维护着一个final修饰char数组,用来储存字符。并且除了hash这个属性其它属性都声明为
weblog 902 根本:进程是操作系统资源分配基本单位,而线程是处理器任务调度执行基本单位。包含关系:一个进程内可以有多个线程(默认有一个主线程),线程是进程一部分,必须依赖于进程而存在,不能独立存在。资源共享:进程之间是不共享资源,多个线程之间是共享资源,所以存在资源竞争问题。
weblog 3580 intInteger 说起intInteger大家耳熟能详是: int是java中基本数据类型,而Integer是引用类型。 Integer必须实例化后才能使用,而
数据库基础 1872 在看这篇文章之前相信你对sql语法顺序执行顺序已经有了足够认识。如果还不了解sql语法顺序执行顺序请点击sql语法顺序执行顺序http://www.jiajiajia.club
linux系统 3397 ctrl+cctrl+z都是中断命令,但是他们作用却不一样.ctrl+c强制中断程序ctrl+z是将任务中断,挂起状态,ctrl+c是强制中断程序执行。ctrl+z是将任务中断.但是此任
算法基础 1048 正向代理反向代理总体来说正向代理反向代理在于代理对象不一样,正向代理代理对象是客户端,反向代理代理对象是服务端。正向代理:客户端一代理一服务端反向代理:客户端一代理一服务端以租
归档
2018年11月  12 2018年12月  33 2019年01月  28 2019年02月  28 2019年03月  32 2019年04月  27 2019年05月  33 2019年06月  6 2019年07月  12 2019年08月  12 2019年09月  21 2019年10月  8 2019年11月  15 2019年12月  25 2020年01月  9 2020年02月  5 2020年03月  16 2020年04月  4 2020年06月  1 2020年07月  7 2020年08月  13 2020年09月  9 2020年10月  5 2020年12月  3 2021年01月  1 2021年02月  5 2021年03月  7 2021年04月  4 2021年05月  4 2021年06月  1 2021年07月  7 2021年08月  2 2021年09月  8 2021年10月  9 2021年11月  16 2021年12月  14 2022年01月  7 2022年05月  1 2022年08月  3 2022年09月  2 2022年10月  2 2022年12月  5 2023年01月  3 2023年02月  1 2023年03月  4 2023年04月  2 2023年06月  3 2023年07月  4 2023年08月  1 2023年10月  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。