v-if
vue中通过v-if,v-else-if,v-else的对应的Boolean值来操作元素在dom中是否移除。
这里就以单纯的true,false来模拟一下。注:标签属性去出来的值为string类型。
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的更多相关文章
- J a v a 的“多重继承”
接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...
- Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V
在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...
- [Erlang 0118] Erlang 杂记 V
我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下. 做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...
- v$session中server为none与shared值解析
查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...
- 引用js或css后加?v= 版本号的用法
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- 操作系统中的P,V操作(转)
无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...
- 关于P,V操作理解的突破,关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...
- XV Open Cup named after E.V. Pankratiev. GP of Tatarstan
A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ukraine
A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...
随机推荐
- 性能测试工具LoadRunner27-LR之读取Excel数据
为何要读取Excel数据? 很多用户喜欢用Excel来统计数据,比如学生成绩表.个人信息等.有时需要把Excel中的数据来进行参数化,数据量比较多时,一个个在LR里输入是不现实的,因此需要用LR来导入 ...
- 注意mysql connector的版本
今天把ubuntu升级到16.04后,使用mysql connector 1.1.8版本(centos 还是ubuntu不清楚)访问数据库,出现莫名其妙的错误. 后来下载mysql connector ...
- (转)Nmap命令的29个实用范例
Nmap命令的29个实用范例 原文:http://os.51cto.com/art/201401/428152.htm Nmap即网络映射器对Linux系统/网络管理员来说是一个开源且非常通用的工具. ...
- IA-32e架构下的内核初始化内存管理
初级内存管理单元 关于内存的分页 以往的物理页是按照4KB进行分配和管理的, 而在Linux之后流行的就是2MB大小的物理页的分配和管理, 整个物理内存管理单元也是2MB物理页管理的 先获取基本的物理 ...
- CentOS7安装Nginx实现API网关
参考 http://nginx.org/ http://nginx.org/en/linux_packages.html#stable https://www.npmjs.com/package/js ...
- php cur错误:SSL错误 unable to get local issuer certificatebool
采集https链接时出现的问题 办法:跳过SSL证书检查 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLO ...
- 【起航计划 017】2015 起航计划 Android APIDemo的魔鬼步伐 16 App->Alarm->Alarm Controller Alarm事件 PendingIntent Schedule AlarmManager
Alarm Controller演示如何在Android应用中使用Alarm事件,其功能和java.util.Timer ,TimerTask类似.但Alarm可以即使当前应用退出后也可以做到Sche ...
- spring mvc踩坑记
前言 主要介绍自己在学习spring mvc过程中踩到的一些坑,涉及到当时遇到这个错误是如何思考的,对思路进行总结,下次遇到类似的错误能够提供一些思路甚至快速解决. 环境准备 jdk8,spring4 ...
- ZIP文件流压缩和解压
前面写了一篇文章 "ZIP文件压缩和解压", 介绍了" SharpZipLib.Zip " 的使用, 最近的项目中,在使用的过程中, 遇到一些问题. 比如, 现 ...
- windows10家庭中文版升级专业版或企业版简单方便的操作方法
以管理员的身份运行cmd 1 ,升级到专业版输入:slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 输入slmgr.vbs -skms zh.us.to 激活 2, 升 ...