简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低

1.共同点

都是动态显示DOM元素

2.区别

(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适合频繁切换。

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. STL 2—迭代器相关运算——advance(),distance(),next(),prev()

    迭代器的头文件中定义了4个实现迭代器模板的函数模板. 1.advance(iterator,num):将迭代器iterator 移动了num个位置 2.distance(iterator1,itera ...

  2. ICC2 常用命令

    1. 关于 data preparation : report_ref_libs : report reference library report_lib  lib_aa : report the ...

  3. [NOI2003]Editor & [AHOI2006]文本编辑器editor BZOJ1507&BZOJ1269

    分析: Splay区间操作裸题,维护出区间信息,按照要求模拟,注意读入格式,并且考虑内存回收(开不下) 附上代码: #include <cstdio> #include <algor ...

  4. 【LeetCode148】Sort List★★bug

    1.题目描述: 2.解题思路: 本题是要堆一个链表进行排序,并且要求时间复杂度为 O(n log n).很明显,要用到分治的思想,用二分法进行归并排序:找到链表的middle节点,然后递归对前半部分和 ...

  5. mssql2012的分页查询

    sql2102支持的分页查询 注意:以下都是先执行排序,再取行数据 select* from t_workers order by worker_id desc offset 3 rows   --先 ...

  6. # 《网络对抗》Exp1 PC平台逆向破解20155337祁家伟

    <网络对抗>Exp1 PC平台逆向破解20155337祁家伟 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会 ...

  7. 利用Python统计微信联系人男女比例以及简单的地区分布

    寒暄的话不多说,直接进入主题. 运行效果图: [准备环境] Python版本:v3.5及其以上 开发工具:随意,此处使用Pycharm [依赖包] 1.itchat (CMD运行:pip instal ...

  8. 架构师修炼 II - 表达思维与驾驭方法论

    开篇之前我想先说说当年开发的那点事儿:大约10年前吧,我还是一个程序员的时候经常都是遇到这样的项目开发流程: 解决方案 :满足客户目的和投标用的一堆文档(不少还是互联网上抄的) ,是以Word为主的纯 ...

  9. C#_备份sqlserver数据库

    C# 代码备份数据库 ,不需要 其他 DLL protected void Button1_Click(object sender, EventArgs e)    {        ///     ...

  10. UE4中Timeline的使用

    UE4中经常需要一些和时间相联系的功能,例如在一段时间内完成一个动作,播放一段动画,或者只是单纯的延迟函数的执行时间,即调整事件的执行顺序.在UE4的蓝图自带函数中有一个很好用的函数可以完美地解决这些 ...