<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue ES5 递归多级菜单</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var menus = [
{
name: "About", path: "/about",
children: [
{name: "About US", path: "/about/us"},
{
name: "About Comp", path: "/about/company",
children: [
{
name: "About Comp A", path: "/about/company/A",
children: [
{
name: "About Comp A 1", path: "/about/company/A/1"
}
]
}
]
}
]
},
{name: "Link", path: "/link"}
];
</script>
<style>
.item{
margin:10px 0;
padding:0 10px;
border-radius:4px;
list-style:none;
background:skyblue;
color:#FFFFFF;
}
#container .wrapper{padding-inline-start:0;}
.wrapper{cursor:pointer;}
.wrapper .item-title{font-size:16px;}
</style>
</head>
<body>
<!-- 主体内容 -->
<div id="container">
<main-menu :menus="menus"></main-menu>
</div>
<!-- 菜单模板 -->
<script type="x-template" id="menu-temp">
<ul class="wrapper">
<li class="item" :key="index" v-for="(item, index) in menus">
<span class="item-title" v-if="!item.children">{{item.name}}</span>
<template v-else>
<span @click="toggle_to_show">{{item.name}} <span v-text="toggle_show?'-':'+'"></span></span>
<main-menu :menus="item.children" v-if="toggle_show"></main-menu>
</template>
</li>
</ul>
</script>
<script type="text/javascript">
// 需先定义模板
Vue.component('main-menu', {
template: '#menu-temp',
data: function () {
return {toggle_show: false};
},
props: ["menus"],
methods: {
toggle_to_show: function () {
this.toggle_show = !this.toggle_show;
}
}
});
new Vue({
el: '#container',
data: {
menus: menus
}
});
</script>
</body>
</html>
