vue.js学习之递归组件

前端之家收集整理的这篇文章主要介绍了vue.js学习之递归组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

递归组件

组件在它的模板内可以递归地调用自己,只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。

实现最终效果图:

    

模拟数据格式如下

统计","menuCode": "BusClock","childTreeNode": [] },{ "id": "3","data": { "menuName": "人事管理",{ "id": "4","data": { "menuName": "基础管理","childTreeNode": [] }]

html我们思路按照ul里面套li,无限ul套li,标题用div元素包裹,

         {{model.data.menuName}}

官方文档里面写的递归组件强调了使用name属性

按照vue的思想,不操作Dom树,我们定义两个变量,一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。

利用vue计算属性动态改变isFolder的值,修改图标,判断存在不子级和子级长度

显示隐藏事件

写到这里我们已经做完一个树形菜单了如下,最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。

  • {{model.data.menuName}}
  • 猜你在找的Vue相关文章