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 ...
随机推荐
- HDU 1045——Fire Net——————【最大匹配、构图、邻接矩阵做法】
Fire Net Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- POJ 1456——Supermarket——————【贪心+并查集优化】
Supermarket Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- 在基于WCF开发的Web Service导出WSDL定义问题及自定义wsdl:port 名称
在契约优先的Web服务开发过程中,往往是先拿到WSDL服务定义,各家开发各自的服务实现或客户端,然后互相调用. 尽管Web Service的标准已经发布很多年,但各 ...
- sass基础
参考:https://www.sass.hk/guide/
- webpack.config.js====图片处理
1. 安装依赖: cnpm install --save-dev url-loader image-webpack-loader html-loader 2. webpack.config.js规则的 ...
- React 表单组件
诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户交互的表单 ...
- Android Studio 小技巧(1):如何导入AAR文件
1. 导入AAR.JAR文件 File- > New -> New Module 这样子AAR文件就导入了,然后在app中的build.gradle中做如下添加 dependencies ...
- LINQ&EF任我行(二)--LinQ to Object
(原创:灰灰虫的家http://hi.baidu.com/grayworm)LinQ to Objects是LinQ家庭的核心,其它的LinQ也使用了与LinQ to Objects相同的查询句法.最 ...
- 栅格那点儿事(四C)
栅格渲染之拉伸(Stretch) 现在我们知道如何在ArcGIS中渲染栅格数据了,但是还有一个常常会碰到的问题,尤其是在使用老版本的ArcGIS的时候,为啥我加了一个栅格数据进来,啥也看不见,是黑色的 ...
- phpStudy:使用localhost无法访问的解决方案
今天遇到新的问题,很有意思,当使用Localhost时,发现报403错误: 百度找到问题所在:没有权限问题 所以我们打开phpStudy,找到配置文件“vhosts-conf”,看到的情况是这样的 接 ...