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;
}
JS实现一个v-if的更多相关文章
- 如何使用 js 实现一个 Promise.all 方法 PromiseAll
如何使用 js 实现一个 Promise.all 方法 PromiseAll Promise.all PromiseAll https://developer.mozilla.org/en-US/do ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 用Backbone.js创建一个联系人管理系统(一)
原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...
- JS获得月最后一天和js得到一个月最大天数
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title ...
- Numeral.js 是一个用于格式化和数字四则运算的js 库
1.Numeral.js 是一个用于格式化和数字四则运算的js 库. 2.支持多种语言,包含中文在内的17种语言. 在浏览器中引用js文件: <script src="numeral. ...
- js实现一个砖头在页面拖拉效果
用js实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果: 刚开始时: 鼠标点击拖动后: 实现代码: <html> <head> <meta ...
- avalon.js实现一个简易日历
使用MVVM框架avalon.js实现一个简易日历 最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...
随机推荐
- JHipster生成微服务架构的应用栈(三)- 业务微服务示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- NFV一种提高进程消息高可用性的方法
1.背景及概述 1.1 背景 在做NFV的过程中,由于控制面进程被放置到不同虚拟机中,中间可能跨越路由器,因此期间网络有可能震荡,这种情况下保证高可用性就必须有保护机制,本文正是在这种背景下的考虑. ...
- 基于pygame实现飞机大战【面向过程】
一.简介 pygame 顶级pygame包 pygame.init - 初始化所有导入的pygame模块 pygame.quit - uninitialize所有pygame模块 pygame.err ...
- 转:修改IIS虚拟目录名称bat脚本
@echo off echo ------------------------------------------------------------------------------ echo - ...
- jQuery -- 光阴似箭(三):jQuery 操作 HTML 元素和属性
jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容: text().html() 以及 val() ...
- Shell按行读取文件的3种方法
Shell按行读取文件的方法有很多,常见的三种方法如下: 要读取的文件: [root@mini05 -]# cat file.info 写法一: [root@mini05 -]# cat read1. ...
- 【递推】ZSC1072: 数学、不容易系列之二—— LELE的RPG难题
思路如下: f(n) = 1, ... , n-2 , n-1, n 前n-2个已涂好后,涂第n-1个即有2种情况: n-1的色与n-2和1的色都不相同,那么n就是剩下的那个色,没有选择. 即就是f( ...
- 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- python六十五课——单元测试(一)
对函数(模块中的)进行函数测试定义两个需要被测试的函数: #求和函数 def mySum(x,y): return x+y #相减函数 def mySub(x,y): return x-y print ...
- 提高git下载速度(非代理或修改HOST)
1. 利用开源中国提供的代码仓库 标题已经说的很清楚了,我想对于经常使用git的人来讲,很可能已经知道了.对于新手刚接触git的人来讲,可能你只知道github. 实际上,国内也有很多代码仓库提供方, ...