Vue实战(一):实现动态菜单

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中引入相关样式


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<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、效果图展示:

Vue实战(一):实现动态菜单_第1张图片

你可能感兴趣的:(Vue实战,vue.js,学习,前端)