正文
v-if
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
vue中通过v-if,v-else-if,v-else的对应的Boolean值来操作元素在dom中是否移除。
这里就以单纯的true,false来模拟一下。注：标签属性去出来的值为string类型。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="root">
<div v-if="true">我是if元素 -- 隐藏</div>
<div v-else>v-else元素 -- 显示</div>
<div v-if="false">
<div v-if="false">我是嵌套if元素 -- 隐藏</div>
<div v-else>嵌套v-else元素 -- 隐藏</div>
</div>
<div v-if="true">
<div v-if="true">我是嵌套if元素 -- 显示</div>
<div v-else>我是嵌套else元素 -- 隐藏</div>
</div>
<div v-if="true">
<div v-if="false">我是嵌套if元素 -- 隐藏</div>
<div v-else>我是嵌套else元素 -- 显示</div>
</div>
<div v-if="true">我是v-if元素 -- 显示1</div>
<div v-else-if="false">v-else-if元素 -- 隐藏2</div>
<div v-else-if="false">v-else-if元素 -- 隐藏3</div>
<div v-else-if="false">v-else-if元素 -- 隐藏4</div>
<div v-else>v-else-- 隐藏5</div>
<div v-if="true">我是v-if元素 -- 隐藏1</div>
<div v-else-if="false">v-else-if元素 -- 隐藏2</div>
<div v-else-if="true">v-else-if元素 -- 显示3</div>
<div v-else-if="false">v-else-if元素 -- 隐藏4</div>
<div v-else>v-else-- 隐藏5</div>
<div v-if="false">我是v-if元素 -- 隐藏1</div>
<div v-else-if="false">v-else-if元素 -- 隐藏2</div>
<div v-else-if="false">v-else-if元素 -- 隐藏3</div>
<div v-else-if="false">v-else-if元素 -- 隐藏4</div>
<div v-else>v-else-- 显示5</div>
</div>
</body>
</html>
<script type="text/javascript">
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>
纯粹是个人随意写的，可能不严谨，还请多多指教！
