做异形建筑的网站/seo jsbapp9

场景：

导航菜单里面的数据不是我们直接在页面上写的而是从后台拿的，这里用data进行模拟，重点是如何进行两级展示,我们需要判断数据中有没有children，如果有的话我们就使用el-menu否则使用el-menu-item，在内部再进行一次for循环，把children的元素放到页面上，以后会给大家总结多级如何展示

<template><div><el-menu class="menu"><!-- 插槽的用法 element-ui用的写法是即将要废弃的语法，可以替换成新的语法 --><template v-for="(item, index) in menu"><el-submenuv-if="item.children && item.children.length":key="item.id":index="(index + 1) | toString"><template #title><span slot="title">{{ item.title }}</span></template><el-submenuv-for="(ele, ind) in item.children":key="ele.id":index="`${(index + 1) | toString} - ${(ind + 1) | toString}`"><template #title><span slot="title">{{ ele.title }}</span></template></el-submenu></el-submenu><el-menu-item v-else :key="item.id" :index="(index + 1) | toString"><template #title><span>{{ item.title }}</span></template></el-menu-item></template></el-menu></div>
</template><script>
export default {name: "Menu",filters: {toString(value) {return value.toString();},},data() {return {menu: [{id: 1,title: "菜单一",},{id: 2,title: "菜单二",},{id: 3,title: "菜单三",children: [{id: 4,title: "菜单四",},],},],};},
};
</script><style>
.menu {width: 200px;
}
</style>