v-if
Posted hjj2ldq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
纯粹是个人随意写的，可能不严谨，还请多多指教！
以上是关于v-if的主要内容，如果未能解决你的问题，请参考以下文章