JS实现一个v-if

// 获取dom
var el = document.getElementById('root');

        console.log(el);
// 遍历dom
        function dealNode(el) {
            var childNodes = el.childNodes;
            [].slice.call(childNodes).forEach((node)=>{
                if(node.nodeType == 1){
                    //节点元素的属性
                    var nodeAttrs = node.attributes;
                    console.log(nodeAttrs);
                    [].slice.call(nodeAttrs).forEach((attr) => {
                        var attrName = attr.name;
                        if(isDeretive(attrName)){
                            var exp = attr.value;
                            var dir = attr.name.substring(2);
                            console.log('指令类型',dir);
                            console.log('指令的值',exp);
                            if(dir == 'if' && (exp=='false')){
                                node.parentNode.removeChild(node);
                            }
                        }
                    });
                }
        
                //节点深层遍历
                if(node.childNodes && node.childNodes.length){
                    dealNode(node);
                }
            })
        }
        dealNode(el);
        
        function isDeretive(attr) {
            return attr.indexOf('r-') == 0;
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS中使用正则表达式替换对象里的大小写

     function parse(obj){ var str = JSON.stringify(obj); var dataObj = str.replace(/...

    李文杨
  • js根据出生年月日换算年龄

    function age_Conversion(date) { debugger var age = ''; var str = date.repl...

    李文杨
  • 常用的几个数组操作方法

    1.取余分割数组 var chartArr = [1, 2, 3, 4, 5, 6, 7]; Array.prototype.splitArray = func...

    李文杨
  • 【H5游戏实例】JS+canvas实现人机大战之五子棋

    html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

    李海彬
  • 当Kotlin遇见数据结构丨使用哈夫曼编码压缩文件

    哈夫曼编码是一种编码格式,属于可变字长编码的一种,该方法依照字符出现的概率来构建异字头的平均长度最短的码字,最终实现根据使用频率来最大化节省码字(字符)的存储空...

    码脑
  • 我是如何通过网络摄像头分析wifi密码的

    看到 exploit-db.com 中报了一个《Netwave IP Camera - Password Disclosure》漏洞, 这个漏洞包含了wifi密...

    周俊辉
  • 基于 HTML5 的 WebGL 3D 版俄罗斯方块

    HT_hightopo
  • Linux Shell 中的 ()、(())、[]、[[]]、{} 怎么用是不是还傻傻分不清?

    ①命令组。括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用。括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命...

    昱良
  • 基于 H5与WebGL 的科幻风机 3D 展示

      许多世纪以来,风力机同水力机械一样,作为动力源替代人力、畜力,对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现,使风机...

    HT for Web
  • 腾讯云对象储存cos的配置方法简单说明

    COS是腾讯云提供的对象存储服务,功能非常强大,可以作为文件服务器,CDN加速,静态网页服务,还提供了图片的常用操作。相关API文档:https://cloud...

    主机优惠教程

扫码关注云+社区

领取腾讯云代金券