v-if和v-show的区别

硅谷探秘者 Md vue 667 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,前端 958 jsjavascriptforinforof,forof遍历原理 一、 forin是ES5语法,forof是ES6语法forin是无序遍历数组或对象,也就是随机遍历,不按照顺序来
weblog 4014 vue使用v-for遍历数组遍历对象splic(...)方法使用请参考:http://www.jiajiajia.club/blog/artical/262!DOCTYPEhtmlhtml
weblog 3844 String类实现及其不可变性 对于String类实现从源码中可以看出,String类底层维护着一个final修饰char数组,用来储存字符。并且除了hash这个属性其它属性都声明为
weblog 1162 根本:进程是操作系统资源分配基本单位,而线程是处理器任务调度执行基本单位。包含关系:一个进程内可以有多个线程(默认有一个主线程),线程是进程一部分,必须依赖于进程而存在,不能独立存在。资源共享:进程之间是不共享资源,多个线程之间是共享资源,所以存在资源竞争问题。
weblog 4410 intInteger 说起intInteger大家耳熟能详是: int是java中基本数据类型,而Integer是引用类型。 Integer必须实例化后才能使用,而
数据库基础 2123 在看这篇文章之前相信你对sql语法顺序执行顺序已经有了足够认识。如果还不了解sql语法顺序执行顺序请点击sql语法顺序执行顺序http://www.jiajiajia.club
linux系统 3763 ctrl+cctrl+z都是中断命令,但是他们作用却不一样.ctrl+c强制中断程序ctrl+z是将任务中断,挂起状态,ctrl+c是强制中断程序执行。ctrl+z是将任务中断.但是此任
算法基础 1370 正向代理反向代理总体来说正向代理反向代理在于代理对象不一样,正向代理代理对象是客户端,反向代理代理对象是服务端。正向代理:客户端一代理一服务端反向代理:客户端一代理一服务端以租
归档
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 2024-02  1 2024-03  1 2024-04  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
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。