// 获取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;
}

JS实现一个v-if的更多相关文章

  1. 如何使用 js 实现一个 Promise.all 方法 PromiseAll

    如何使用 js 实现一个 Promise.all 方法 PromiseAll Promise.all PromiseAll https://developer.mozilla.org/en-US/do ...

  2. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  3. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  4. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  5. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  6. AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  7. JS获得月最后一天和js得到一个月最大天数

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title ...

  8. Numeral.js 是一个用于格式化和数字四则运算的js 库

    1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...

  9. js实现一个砖头在页面拖拉效果

    用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码: <html>   <head>       <meta ...

  10. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

随机推荐

  1. MySQL5.7 搭建主从同步

    性能更好的新服务器申请下来了,我们决定在2台新服务器上使用mysql5.7,并且使用主从同步.读写分离架构,很不幸这个任务落到了我的头上.读写分离是在业务代码中实现的,在此不做详述,介绍一下我搭建My ...

  2. Orchard详解--第一篇 介绍

    Orchard是一个开源的内容管理系统(CMS),它提供了简单的向导式的安装方法,用于快速建站(如WordPress).对于.Net的开发者来说,Orchard有更好的学习价值,所以本系列文章将对Or ...

  3. Spark操作HBase报:org.apache.hadoop.hbase.client.RetriesExhaustedWithDetailsException异常解决方案

    一.异常信息 19/03/21 15:01:52 WARN scheduler.TaskSetManager: Lost task 4.0 in stage 21.0 (TID 14640, hnte ...

  4. VScode快捷键、Chrome快捷键知识小总结和状态码

           一.VS code的一些快捷键 Shift + Delete    删除一整行 ctrl + Delete     删除光标之后到标点的数据 Delete          删除光标之后 ...

  5. MS SQL CASE WHEN 的用法

    前言 由于经常使用 case when 的2种情况方式,如果=1 则*** 否则 *** 结束.久而久之,都以为只能这么用,都忘记了Case WHEN 的用法. 示例   ,              ...

  6. 前后端分离djangorestframework——权限组件

    权限permissions 权限验证必须要在认证之后验证 权限组件也不用多说,读了源码你就很清楚了,跟认证组件很类似 具体的源码就不展示,自己去读吧,都在这里: 局部权限 设置model表,其中的ty ...

  7. SQL SERVER 查看数据库安装时间

    --通过name为NT AUTHORITY\SYSTEM的登录账号的create_date,就知道SQL Server的安装日期了. SELECT * FROM SYS.SERVER_PRINCIPA ...

  8. LeetCode算法题-Climbing Stairs(Java实现)

    这是悦乐书的第159次更新,第161篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第18题(顺位题号是70).你正在爬楼梯,它需要n步才能达到顶峰.每次你可以爬1或2步, ...

  9. 聚类——GAKFCM的matlab程序

    聚类——GAKFCM的matlab程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在聚类——GAKFCM文章中已介绍了GAKFCM算法的理论知识, ...

  10. 百度统计api获取数据

    需求场景 想要了解每天多少人访问了网站,多少个新增用户,地域分布,点击了哪些页面,停留了多久,等等... 国内用的最多的就是百度统计吧,傻瓜式的注册然后插一段代码到项目里就行了. 最近也在自己的博客里 ...