v-for和v-if，v-for和template一起使用

v-for和v-if

• 在 vue2.x中，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
• 在 vue3.x中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级

<div v-for="item in menuList" v-if="!item.children">{{item.name}}</div>

1. 使用计算属性computed

computed: {
	hasChildrenList: function() {
		return this.menuList.filter((item) => {
			return !item.children
		})
	}
}

2. 在template上使用v-if

<ul>
  <template v-for="item in menuList">
    <li>{{ item.name}}</li>
  </template>
</ul>

举例：

<template>
   <el-menu
     default-active="2"
     class="el-menu-vertical-demo"
   >
     <template v-for="(item, i) in menuList">
       <el-menu-item
         v-if="!item.children"
         :key="i"
         :index="item.id"
         >{{ item.name }}</el-menu-item
       >
       <el-submenu v-else :key="i" :index="item.id">
         <template slot="title">{{ item.name }}</template>
         <template v-for="(item2, i2) in item.children">
           <el-menu-item
             v-if="!item2.children"
             :key="i2"
             :index="item.id + '-' + item2.id"
             >{{ item2.name }}</el-menu-item
           >
           <el-submenu
             v-else
             :key="i2"
             :index="item.id + '-' + item2.id"
           >
             <template slot="title">{{ item2.name }}</template>
             <el-menu-item
               v-for="(item3, i3) in item2.children"
               :key="i3"
               :index="item.id + '-' + item2.id + '-' + item3.id"
               >{{ item3.name }}</el-menu-item
             >
           </el-submenu>
         </template>
       </el-submenu>
     </template>
   </el-menu>
</template>    
<script>
	export default {
		data(){
			return{
				menuList: [
			        {
			          id: '11',
			          name: '平台简介'
			        },
			        {
			          id: '12',
			          name: '新手指南'
			        },
			        {
			          id: '13',
			          name: '开发文档',
			          children: [
			            {
			              id: '1',
			              name: 'API调用详情'
			            },
			            {
			              id: '2',
			              name: 'API调用示例'
			            },
			            {
			              id: '3',
			              name: '常用工具',
			              children: [
			                {
			                  id: '1',
			                  name: 'API测试工具'
			                },
			                {
			                  id: '2',
			                  name: '错误码排查工具'
			                }
			              ]
			            }
			          ]
			        },
			        {
			          id: '14',
			          name: '常用问题',
			          children: [
			            {
			              id: '1',
			              name: '名词解释'
			            }
			          ]
			        },
			        {
			          id: '15',
			          name: 'API接口文档'
			        }
			      ]
			}
		}
	}
</script>