<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#app{
width: 300px;
overflow: hidden;
}
.item{
margin-left: 30px;
/* padding-left: 30px; */
width: 100%;
}
.name {
background-color: pink;
border-bottom: 1px solid #333;
cursor:pointer;
}
.name:hover{
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<list :menus="menus"></list>
</div>
<template id="list">
<div>
<div v-for="(item,index) in menus" :key="index" class="item">
<div class="name">{{item.name}}</div>
<child v-if="item.children" :child="item.children"></child>
</div>
</div>
</template>
<template id="child">
<div>
<list :menus="child"></list>
</div>
</template>
<script src="vue.js"></script>
<script>
Vue.component("list", {
props: ['menus'],
template: "#list",
})
Vue.component("child", {
props: ['child'],
template: "#child",
})
var vm = new Vue({
el: "#app",
data: {
menus: [{
name: "经济",
children: [{
name: "如家",
children: [{
name: "上江路-如家"
}, {
name: "望江路-如家"
}]
}, {
name: "7天",
children: [{
name: "长江路-7天"
}, {
name: "望江路-7天"
}]
}]
}]
},
mounted: function() {
},
method: {
}
})
</script>
</body>
</html>
