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快速实现了一个简 ...
随机推荐
- Linux中对swap分区的配置
swap分区的安装与正常分区的安装大致相同,我这里就只说一下不同 大家可先看我上一篇的安装:https://www.cnblogs.com/feiquan/p/9219447.html 1.查看swa ...
- SQL Server OPTION (OPTIMIZE FOR UNKNOWN) 测试总结
关于SQL Server的查询提示OPTION (OPTIMIZE FOR UNKNOWN) ,它是解决参数嗅探的方法之一. 而且对应的SQL语句会缓存,不用每次都重编译.关键在于它的执行计划的准 ...
- java单元测试
单元测试 1.简介 在日常开发中,我们编写的任何代码都需要经过严谨的测试才可以发布.以往的测试方法都是通过编写一个main函数进行简单的测试,并使用大量的print语句输出结果,这种方法其实是不可取的 ...
- Django的安装和启动
花了将近半个月的时间终于完成了Django的初步学习,从安装到实践MVTC架构,再到写简易的model和view,踩过不少坑,因此这里分享出来,也算一个阶段性的总结. 1.安装Django pip i ...
- ini (ini-parser)配置文件解析 for donet
介绍 此ini解析库适用于mono(unity3d),donet,大小在30kb左右. 开源免费:https://github.com/rickyah/ini-parser 使用示例 engine_c ...
- 【Git学习二】深入了解git checkout命令
检出命令(git checkout)是Git最常用的命令之一,同时也是一个很危险的命令,因为这条命令会重写工作区.检出命令的用法如下: 用法一:git checkout[-q][<commit& ...
- ABAP 7.50 新特性 – Open SQL中的宿主表达式和其它表达式
在长期的停滞后,Open SQL的发展终于从沉睡中醒来.从ABAP 7.40开始,SAP推进了某些关键的改变,以尽可能地包含SQL92中的特性,并提供与ABAP CDS中的DDL里面的SELECT一样 ...
- Nginx使用教程(七):使用Nginx缓存之proxy cache
定义缓存目录 <br\>使用您喜欢的文本编辑器打开/etc/nginx/nginx.conf,并在http {区域加入: proxy_cache_path /var/www/cache ...
- 16.ajax_case04
# 抓取金色财经快讯接口 # https://www.jinse.com/lives import requests import json header = { 'Accept': 'text/ht ...
- centos7下安装docker(15.6docker跨主机网络---Weave)
Weave是weaveworks开发的容器网络解决方案.weave创建的虚拟网络可以将部署在多个主机上的容器连接起来.对于容器来说,weave就像一个巨大的网络交换机,容器可以直接通信,无需NAT和端 ...