<!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>