html 列表循环 el,element-ui的navMenu使用v-for循环渲染不同子标签(el-menu-item和el-submenu)...

简单记录

1.简介

2.上代码

2.1html代码

2.1.1原理

2.2 js代码

3.树型组件实现

4.结语

1.简介

作为一个合格的全栈开发者，前端的常用技术肯定不能落下。在深度了解了原生HTML5、CSS3和JavaScript(ES5和ES6)之后，前端的三大马车(Vue、React、Angular)至少要会一个吧，国内使用Vue比较多，Vue是一个轻量级的框架，组件化和MVVM的思想的应用使得Vue在性能和项目管理上都有比较明显的优势，同时，丰富的NodeJS插件和Vue插件也使得我们开发的效率大大提高。

本文所说的就是Vue中使用element-ui的一个小技巧，关于navMenu的v-for渲染的。默认本文读者都是对Vue和element-ui有所了解的。

友情链接：

Vue官网

element-ui官网

2.上代码

element-ui中关于navMenu的组件主要是这几个(el-menu、el-submenu、el-menu-item-group、el-menu-item)，用法参考官网的例子。

https://element.eleme.cn/#/zh-CN/component/menu

在我的需求，我没有用到el-menu-item-group，只用到了另外三个。最终想要实现的效果如图所示：