您现在的位置是:网站首页> 编程资料编程资料

Vue实现嵌套菜单组件_vue.js_

2023-05-24 458人已围观

简介 Vue实现嵌套菜单组件_vue.js_

本案例为大家分享了Vue实现嵌套菜单组件的具体代码,供大家参考,具体内容如下

本文旨在使用Vue.js完成一个嵌套的菜单组件,使用mock.js对数据进行模拟,并且最小化复现功能

安装mock

cnpm i mockjs

//引入mockjs import Mock from 'mockjs' //使用mockjs模拟数据 Mock.mock('/menuData', 'get', {     "ret": 0,     "data": [{             "id": 1,             "name": "第一层",             "children": [{                     "name": "第二层"                 },                 {                     "name": "第二层"                 },                 {                     "name": "第二层"                 }             ]         },         {             "id": 2,             "name": "第一层",             "children": [{                     "name": "第二层"                 },                 {                     "id": 3,                     "name": "第二层",                     "children": [{                             "name": "第三层"                         },                         {                             "name": "第三层"                         },                         {                             "name": "第三层"                         }                     ]                 },                 {                     "id": 4,                     "name": "第二层",                     "children": [{                             "name": "第三层"                         },                         {                             "name": "第三层"                         },                         {                             "id": 5,                             "name": "第三层",                             "children": [{                                     "name": "第四层"                                 },                                 {                                     "name": "第四层"                                 },                                 {                                     "id": 6,                                     "name": "第四层",                                     "children": [{                                             "name": "第五层"                                         },                                         {                                             "name": "第五层"                                         },                                         {                                             "name": "第五层"                                         }                                     ]                                 }                             ]                         }                     ]                 }             ]         }     ] });

菜单组件

使用菜单组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

-六神源码网