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

最新推荐文章于 2024-09-18 08:09:21 发布

落步惊风

最新推荐文章于 2024-09-18 08:09:21 发布

阅读量2.1k

点赞数

文章标签： html 列表循环 el

本文介绍如何在Vue中利用Element-UI的navMenu组件，通过v-for循环渲染el-menu-item和el-submenu。讲解了组件原理，提供了html和js代码示例，展示了一级和二级菜单的实现，强调了index属性的唯一性。此外，还提及了树型组件的实现，鼓励读者探索更深层次的菜单渲染。

摘要由CSDN通过智能技术生成

简单记录

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，只用到了另外三个。最终想要实现的效果如图所示：