v-show
v-show的原理是当值为false的时候,元素display:none 隐藏了元素且脱离文档流,但是在dom 中仍然存在。
与v-if使用场景不同,文档中提到,当需要高频切换的时候使用v-show会更加的有益与性能,当然v-if的初始开销是要高于v-show的。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="root">
<div v-show="true">我是show显示元素 -- 显示</div>
<div v-show="false">我是show隐藏元素 -- 隐藏</div> <div v-show="true">
<div v-show="true">我是show嵌套显示元素 -- 显示</div>
<div v-show="false">我是show嵌套隐藏元素 -- 隐藏</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var root = document.getElementById('root')
function dealNode(el){
let child = Array.from(el.children);
child.forEach(item=>{
if(item.getAttribute('v-show')==='false'){
item.style.display = 'none'
}
if(item.children && item.children.length){//如果有子元素就递归继续
dealNode(item);
}
})
}
dealNode(root)
</script>
v-show的更多相关文章
- J a v a 的“多重继承”
接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...
- Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V
在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...
- [Erlang 0118] Erlang 杂记 V
我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下. 做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...
- v$session中server为none与shared值解析
查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...
- 引用js或css后加?v= 版本号的用法
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- 操作系统中的P,V操作(转)
无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...
- 关于P,V操作理解的突破,关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...
- XV Open Cup named after E.V. Pankratiev. GP of Tatarstan
A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ukraine
A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...
随机推荐
- [转] javascript另类方法高效实现htmlencode()与htmldecode()函数
本文转自:http://blog.csdn.net/cuixiping/article/details/7846806 最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > &am ...
- Murano Weekly Meeting 2016.08.02
Meeting time: 2016.August.02 1:00~2:00 Chairperson: Valerii Kovalchuk, from Mirantis Meeting summar ...
- IIS/asp.net管道
http://referencesource.microsoft.com/ 理解ASP.NET的前提是对ASP.NET管道式设计的深刻认识.而ASP.NET Web应用大都是寄宿于IIS上的. IIS ...
- git分布式的理解----简单服务端搭建
Git是分布式的,并没有服务端跟客户端之分,所谓的服务端安装的其实也是git.Git支持四种协议,file,ssh,git,http.ssh是使用较多的,下面使用ssh搭建一个免密码登录的服务端. 1 ...
- [LeetCode]11. Container With Most Water 盛最多水的容器
Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...
- UITableView分隔线
问题1: 在ios中使用UITableView时,当行数较少是,可能一屏幕能显示完全所有行,这时候会出现下面的问题,显示多余的分隔线 图如下: 解决方案: //解决方案1 //添加如下代码 -(CGF ...
- git 提交各种情况下的处理方式
自己总结: 01.若在提交过程中有冲突,解决冲突后,git add . git rebase —continue git push for 02.git rebase vs git merge g ...
- table表格td内内容自动换行
项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...
- css3骰子(transform初识)
利用css3制作可旋转的骰子,效果图如下,也可以查看 demo: 首先是骰子的html结构,.page 是骰子的六个页面的 class,#one-#six分别表示六个面,.point 是骰子表面的点数 ...
- Struts2_HelloWorld_2
设置 tomcat 的位置 (jre:并不是jdk) 打开 struts2目录:apps 示例程序docs 文档lib 类库src 源码 打开 apps 目录下的 struts2-blank.war ...