具体样式代码查看项目github
创建一个vue实例<!DOCTYPE html> <html> <head> <meta charset=http://www.likecs.com/"UTF-8"> <title></title> <script src=http://www.likecs.com/"https://cdn.bootcss.com/vue/2.5.9/vue.js"></script> </head> <body> <div class=http://www.likecs.com/"content" style=http://www.likecs.com/"width:900px;margin:0 auto;"> <!-- vue实例挂载的DOM元素 --> <div id=http://www.likecs.com/"app-menu"> <!-- 菜单预览界面 --> <div class=http://www.likecs.com/"weixin-preview"></div> <!-- 菜单编辑界面 --> <div class=http://www.likecs.com/"weixin-menu-detail"></div> </div> </div> <script> var app =http://www.likecs.com/ new Vue({ el: '#app-menu',//挂载到对应的DOM元素 data: { weixinTitle: 'Vue.js公众号菜单', //菜单对象 menu: { "button": [ { "name": "主菜单1", "sub_button": [] }, { "name": "主菜单2", "sub_button": [] }, { "name": "主菜单3", "sub_button": [ { "name": "子菜单1" }] }] }, selectedMenuIndex:'',//当前选中菜单索引 selectedSubMenuIndex:'',//当前选中子菜单索引 }, methods: { } }) </script> </body> </html>