vue中通过v-if,v-else-if,v-else的对应的Boolean值来操作元素在dom中是否移除。

这里就以单纯的true,false来模拟一下。注：标签属性去出来的值为string类型。

<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>  
    <div id="root">
     <div v-if="true">我是if元素 -- 隐藏</div>
     <div v-else>v-else元素 -- 显示</div>
        
        <div v-if="false">
            <div v-if="false">我是嵌套if元素 -- 隐藏</div>
            <div v-else>嵌套v-else元素 -- 隐藏</div>
        </div>
        <div v-if="true">
            <div v-if="true">我是嵌套if元素 -- 显示</div>
            <div v-else>我是嵌套else元素 -- 隐藏</div>
        </div>
        <div v-if="true">
            <div v-if="false">我是嵌套if元素 -- 隐藏</div>
            <div v-else>我是嵌套else元素 -- 显示</div>
        </div>
        <div v-if="true">我是v-if元素 -- 显示1</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏2</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏3</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏4</div>
        <div v-else>v-else-- 隐藏5</div>
        <div v-if="true">我是v-if元素 -- 隐藏1</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏2</div>
        <div v-else-if="true">v-else-if元素 -- 显示3</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏4</div>
        <div v-else>v-else-- 隐藏5</div>
        <div v-if="false">我是v-if元素 -- 隐藏1</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏2</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏3</div>
        <div v-else-if="false">v-else-if元素 -- 隐藏4</div>
        <div v-else>v-else-- 显示5</div>
    </div>
</body>
</html>
<script type="text/javascript">
    var root = document.getElementById('root')
    //查找下一个元素是否符合条件

    function findNext(el,arr){

        let next = el.nextElementSibling

        if(next && next.hasAttribute('v-else-if')){

            arr.push(next)

            findNext(next,arr)

        }else if(next && next.hasAttribute('v-else')){

            arr.push(next)

        }

    }

    function dealNode(el){

        let child = Array.from(el.children);
        //获取到的是类数组对象，必须转为数组对象，也可以使用 [].slice.call()来转化
        //用for循环方便break

        for(let i = 0;i < child.length;i++){

            //处理v-if

            let item = child[i]

            let vIfVal = item.getAttribute('v-if')

            if(vIfVal){

                let connectArr = [];

                //将对应的组合集中起来

                connectArr.push(item)

                findNext(item,connectArr)

                //优先权重

                for(let i = 0;i < connectArr.length;i++){

                    let item = connectArr[i]

                    //如果是true的话就停止，其他元素全部移除，不管后面是true还是false

                    if((item.getAttribute('v-if') === 'true' || item.getAttribute('v-else-if') === 'true')){

                        connectArr.forEach((item,index)=>{

                            if(index != i){

                                item.parentNode.removeChild(item)

                            }

                        })

                        break

                        //预防单个情况，直接移除就好

                    }else if(item.getAttribute('v-if') === 'false' || item.getAttribute('v-else-if') === 'false'){

                        item.parentNode.removeChild(item)

                    }else if(item.getAttribute('v-else')){//到最后的else

                        connectArr.forEach((item,index)=>{

                            if(index != i){

                                item.parentNode.removeChild(item)

                            }

                        })

                    }

                }

            }

            if(item.children && item.children.length){//如果有子元素就递归继续

                dealNode(item);

            }

        }

    }

    dealNode(root)

</script>

纯粹是个人随意写的，可能不严谨，还请多多指教！

v-if的更多相关文章

  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. 性能测试工具LoadRunner30-LR之监控Tomcat

    步骤: 1.通过LR去访问tomcat监控页(安装tomcat的过程可以百度一下) 2.然后通过关联取监控数据 3.通过lr_user_data_point()添加数据到图表中去 double ato ...

  2. escape、encodeURI以及encodeURIComponent

    在标准中,只有字母和数字[0-9a-zA-Z].一些特殊符号"$-_.+!*'(),"[不包括双引号].以及某些保留字,才可以不经过编码直接用于URL.但是比如我们搜索时,往往会输 ...

  3. Kudu的架构

    不多说,直接上干货!  Kudu的架构 1.kudu的 基本框架 Kudu 是用于存储结构化( structured )的表( Table ).表有预定义的带类型的列( Columns ),每张表有一 ...

  4. IAR6.1的工程迁移到IAR6.5不能用的解决方法

    1.重命名过时的CMSIS头文件 "... \ CMSIS \ CM3 \ CoreSupport \ core_cm3.h  比如:core_cm3.h.old 2.启用CMSIS:项目- ...

  5. linux 编译安装php7

    1.下载php7安装包: php7 2.解压 .tar.gzcd php-7.1.5 3.可能需要的扩展 yum install libmcrypt libmcrypt-devel mcrypt mh ...

  6. Django Rest Framework框架源码流程

    在详细说django-rest-framework源码流程之前,先要知道什么是RESTFUL.REST API . RESTFUL是所有Web应用都应该遵守的架构设计指导原则. REST是Repres ...

  7. Xxy 的车厢调度

    有 一 个 火 车 站 , 铁 路 如 图 所 示 ,每辆火车从 A 驶入, 再从 B 方向驶出,同时它的车厢可以重新组合.假设 从 A 方向驶来的火车有 n 节(n<=1000) ,分别按照顺 ...

  8. Android Vmp加固实现流程图

    0x00: 目前各种加固都说是VMP了,简单分析市面上的加固,然后自己实现了一个类似原理的加固,大致流程图如下: 加固端: 解释器:

  9. php的yii框架开发总结1

    最近用php的yii框架写了一个小的demo,虽然不复杂,但是也学习了很多东西,现在总结一下. 项目需求:为几个教研室写一个日报系统,每个人每天写日报,并且系统有自动实现发邮件功能. 额外要求:1.人 ...

  10. [topcoder]SRM 633 DIV 2

    第一题,http://community.topcoder.com/stat?c=problem_statement&pm=13462&rd=16076 模拟就可以了. #includ ...