Vue实战（一）：实现动态菜单
1、编写menu.json
[{
"id": "1",
"name": "一级菜单1",
"children": [{
"id": "1-1",
"name": "二级菜单1-1",
"children": [{
"id": "1-1-0",
"name": "三级菜单1-1-0"
}, {
"id": "1-1-1",
"name": "三级菜单1-1-1"
}]
}, {
"id": "1-2",
"name": "二级菜单1-2",
"children": [{
"id": "1-2-0",
"name": "三级菜单1-2-0"
}, {
"id": "1-2-1",
"name": "三级菜单1-2-1"
}]
},{
"id":"1-3",
"name":"二级菜单1-3",
"children":null
}]
}, {
"id": "2",
"name": "一级菜单2",
"children": [{
"id": "2-1",
"name": "二级菜单2-1",
"children": [{
"id": "2-1-0",
"name": "三级菜单2-1-0"
}, {
"id": "2-1-1",
"name": "三级菜单2-1-1"
}]
}]
}]
2、在html中引入相关样式
<!-- 引入vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入axios库 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
3、设计菜单样式
<body>
<div id="app">
<el-menu style="width:400px;border:1px solid black;" background-color="#545c64" text-color="#ffffff"
active-text-color="#ffd04b">
<el-submenu :index="menu.id" v-for="menu of menuList" :key="menu.id">
<template slot="title">
<span>{{menu.name}}</span>
</template>
<el-submenu :index="child.id" :key="child.id" v-for="child of menu.children"
v-if="child.children != null">
<template slot="title">
<span>{{child.name}}</span>
</template>
<el-menu-item :index="ch.id" :key="ch.id" v-for="ch of child.children">{{ch.name}}
</el-menu-item>
</el-submenu>
<el-menu-item v-for="child of menu.children" v-if="child.children == null" :index="child.id"
:key="child.id">
{{child.name}}
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</body>
4、在script中编辑，将menu.json中内容复制到menuLis后
<script>
new Vue({
el: '#app',
data: {
menuList: []
}
});
</script>
5、效果图展示：
