1.共同点:

v-if 和 v-show 都能实现元素的显示隐藏.

2.不同点:

v-if显示隐藏是将dom元素整个添加或删除,v-show元素隐藏时,会在dom节点中把该元素设置css属性为display : none,元素依然保留在dom节点中.

3.区别

(1).手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

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

(3).编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;

        只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);

        v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;

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

(5).使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。

4.什么时候使用v-if,什么时候使用v-show?

当组件中某块内容只会显示或隐藏不会被再次改变显示状态,此时用v-if更加合适,例如请求后台接口通过后台数据控制某块内容是否显示或隐藏,且这个数据在当前页不会被修改;

当组件某块内容显示隐藏是可变化的(元素频繁显示和隐藏),此时用v-show更加合理,例如页面中有一个toggle按钮,点击按钮来控制某块区域的显示隐藏。

原因:

频繁操作dom对性能影响很大,v-if如果用在有toggle按钮控制的情况下,相当于在频繁增加dom和删除dom,

所以此时用v-show更加合适,如果只是要么显示要么隐藏之后不会再改变显示隐藏状态的情况,v-if更加的合理,

因为如果默认就是隐藏,相当于dom一次都不用创建,如果默认是显示,v-if和v-show效果完全一样。

v-if和v-show的区别与使用的更多相关文章

  1. FFmpeg笔记--vcodec和-c:v,-acodec和-c:a的区别?

    在看ffmpeg命令的时候经常会看到有些地方使用--vcodec指定视频解码器,而有些地方使用-c:v指定视频解码器,那这两个有没有区别呢? ffmpeg的官方文档: -vcodec codec (o ...

  2. 转:oracle几组重要的常见视图-v$latch,v$latch_children,v$lock,v$locked_object

    v$latch Oracle Rdbms应用了各种不同类型的锁定机制,latch即是其中的一种.Latch是用于保护SGA区中共享数据结构的一种串行化锁定机制.Latch的实现是与操作系统相关的, 尤 ...

  3. oracle 入门笔记--v$sql和v$sqlarea视图(转载)

    转载于作者:dbtan 原文链接:http://www.dbtan.com/2009/12/vsql-and-vsqlarea-view.html v$sql和v$sqlarea视图: 上文提到,v$ ...

  4. Oracle基本数据字典:v$database、v$instance、v$version、dba_objects

    v$database: 视图结构: SQL> desc v$database; Name                                      Null?    Type - ...

  5. POJ2762 Going from u to v or from v to u(单连通 缩点)

    判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...

  6. Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序

         Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K       Description I ...

  7. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  8. [强连通分量] POJ 2762 Going from u to v or from v to u?

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17089 ...

  9. POJ2762 Going from u to v or from v to u?(判定单连通图:强连通分量+缩点+拓扑排序)

    这道题要判断一张有向图是否是单连通图,即图中是否任意两点u和v都存在u到v或v到u的路径. 方法是,找出图中所有强连通分量,强连通分量上的点肯定也是满足单连通性的,然后对强连通分量进行缩点,缩点后就变 ...

  10. poj 2762 Going from u to v or from v to u?

    题目描述:为了让他们的儿子变得更勇敢些,Jiajia和Wind将他们带到一个大洞穴中.洞穴中有n个房间,有一些单向的通道连接某些房间.每次,Wind选择两个房间x和y,要求他们的一个儿子从一个房间走到 ...

随机推荐

  1. docker 启动容器失败 id already in use

    问题:id already in use 解决:/etc/docker/daemon.json {"shutdown-timeout": 60}

  2. umount 时目标忙解决办法

    [root@node2 ~]# umount /var/lib/ceph/osd/ceph- umount: /var/lib/ceph/osd/ceph-:目标忙. (有些情况下通过 lsof() ...

  3. Go:排序算法

    一.冒泡排序 package main import "fmt" func BubbleSort(arr []int) { /* 思路:将大的元素一步一步"冒泡" ...

  4. CentOS 桥接网卡配置

    [root@controller ~]# cat /etc/sysconfig/network-scripts/ifcfg-br0 DEVICE=br0 ONBOOT=yes TYPE=Bridge ...

  5. 计算机网络-网络层(1)IPv4和IPv6

    IPv4数据报格式: 版本号 这4比特规定了数据报的IP 协议版本.通过查看版本号,路由器能够确定如何解释IP数据报的剩余部分. 首部长度 以4字节为单位,没有选项的首部长度为5*4=20字节 服务类 ...

  6. 教育行业CRM项目开发

    项目开发流程 需求分析 存储所有的客户咨询信息    避免重复数据    客户多次跟踪记录    客户来源分析.成单率分析    每个销售只能修改自己的客户信息    报名流程开发        班级 ...

  7. Java数据结构——2-3树

    定义2-3树是平衡的3路查找树,其中2(2-node)是指拥有两个分支的节点,3(3-node)是指拥有三个分支的节点.B-树是一种平衡的多路查找树,2-3树属于b-树,其也同样具有B-树的性质,如m ...

  8. Nuxt.js 踩坑记录(3) Net.connection xxxx

    浏览器报的是Net.connection啥的错误 项目运行时报错这个 [HPM] Error occurred while trying to proxy request article from l ...

  9. 洛谷 P4343 [SHOI2015]自动刷题机

    思路 二分答案 显然的二分答案,但是因为二分判定条件 \(\text{wa}\) 了好几遍-- 可以发现,\(n\) 越大,\(k\) 就越小,所以答案是有单调性的,因此可以用两个二分,一次求最大值, ...

  10. 理解Django 中Call Stack 机制的小Demo

    1.工作流程 request/response模式下,request并不是直接到达view方法,view方法也不是将返回的response直接发送给浏览器的,而是request由外到里的层层通过各种m ...