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 ...
随机推荐
- pat1088. Rational Arithmetic (20)
1088. Rational Arithmetic (20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue F ...
- php fopen()和file_get_contents() 区别介绍
本文章向码农们介绍PHP使用fopen与file_get_contents读取文件实例分享及这两个函数的区别,需要的码农可以参考一下. php中读取文件可以使用fopen和file_get_conte ...
- 动态配置log4j2.xml日志输出文件的位置
目标:根据启动jar时传进main()的参数动态修改日志位置 一.修改启动项 MainMapLookup.setMainArguments(args);注:不要在lookup设置之前初始化log(如: ...
- Windows窗体应用开发2--窗体和控件
1.Windows窗体应用程序的各种组件 2.windows窗体控件的主要类别和功能 3.Windows窗体应用程序处理事件的方法 4.添加并配置Windows窗体和控件 5.创建时间处理程序并监视程 ...
- C#多线程进度条
public class ZyjProgressBar : System.Windows.Forms.ProgressBar { //用于跨线程访问控件的委托 private delegate voi ...
- JAVA SE collection接口
collection接口:{Set,List,Queue} Set:无序集合,元素不可重复 List:有序集合,元素可重复 Queue:队列 Set{EnumSet ...
- Oracle的oci.dll加载错误解决办法
开始 -> 程序 -> Oracle -> Configuration and Migration Tools -> Net Manager→本地→概要文件→Oracle高级安 ...
- 责任链模式(ChainOfResponsibiliby、Filter)
Request 类: package com.demo; public class Request { private String requestStr; public String getRequ ...
- 类型信息（RTTI和反射）——RTTI
运行时类型信息可以让你在程序运行时发现和使用类型信息. 在Java中运行时识别对象和类的信息有两种方式:传统的RTTI,以及反射.下面就先来说下RTTI. 1.RTTI: RTTI:在运行时,识别一个 ...
- VM（xp系统下用虚拟机安装win8 提示 ：units specified don't exist, SHSUCDX can't install）解决方法
改成IDE的模式