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的更多相关文章

  1. J a v a 的“多重继承”

    接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...

  2. Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V

    在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...

  3. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  4. v$session中server为none与shared值解析

    查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...

  5. 引用js或css后加?v= 版本号的用法

    <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...

  6. 操作系统中的P,V操作（转）

    无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...

  7. 关于P,V操作理解的突破，关于并发设计与并行

    今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...

  8. XV Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...

  9. XVII Open Cup named after E.V. Pankratiev. GP of SPb

    A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...

  10. XVI Open Cup named after E.V. Pankratiev. GP of Ukraine

    A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...

随机推荐

  1. If you are tired...

    如果你累了 1. 深呼吸 放松身体,深呼吸五分钟. 2. 听音乐 静静地听几首歌放松一下就好了,比如王豪学长推荐的追梦赤子心,骄傲的少年. 3. 冥想 放松身体,处于冥想状态. 4. 干洗脸.鸣天鼓. ...

  2. 关闭ubuntu讨厌的内部错误提示

    修改/etc/default/apport 浏览下/etc/init/apport.conf 内容你会发现,控制此服务是否启动的是/etc/default/apport 所以把/etc/default ...

  3. SQL DATEDIFF语法及时间函数 Sql 查询当天、本周、本月记录

    SQL DATEDIFF语法及时间函数 Sql 查询当天.本周.本月记录 转:http://blog.csdn.net/Json1204/article/details/7863801?locatio ...

  4. Java中的阻塞队列-SynchronousQueue

    SynchronousQueue是一个不存储元素的阻塞队列.每一个put操作必须等待一个take操作,否则不能继续添加元素.SynchronousQueue可以看成是一个传球手,负责把生产者线程处理的 ...

  5. <jsp:javabean>动作标签实例

    <jsp:javabean>动作标签实例 之后补齐基础知识 scope属性 该属性指定了所创建Bean实例的存取范围,省略该属性时的值为page.<jsp:useBean>标识 ...

  6. 【Android 界面效果48】Android-RecyclerView-Item点击事件设置

    在上一篇博客Android-RecylerView初识中提到,RecyclerView不再负责Item视图的布局及显示,所以RecyclerView也没有为Item开放OnItemClick等点击事件 ...

  7. SQL SERVER 错误代码 0x534

    解决办法就是修改一下登陆名: ALTER LOGIN [G-PC\zqwang]   WITH NAME=[新的机器名\zqwang]; 然后查询一下 Service Broker 队列, 里面已经有 ...

  8. Eclipse JSP 页面设置 charset=UTF-8

    windows —> Preferences —> 搜索框中输入:JSP,设置如下:

  9. Arcgis for Js之鼠标经过显示对象名的实现

    在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效果. 为了有个直观的概念,先给大家看看实 ...

  10. MVC框架的实现

    现在web开发基本都是MVC的架构了,struts.springMvc 等等.其中一个重要的功能就是将客户发起的请求,分发至我们定义的Action里面的方法之中. 闲暇之余,我也做了一个类似于spri ...