v

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>