示例学习-树形菜单的形成---使用vue.js

本文是官网示例的学习https://vuefe.cn/v2/examples/tree-view.html，根据其方法，自行进行编写。

第一步，获得树形数据

对于渲染成一个树形菜单，也就是我们平时见到的多级菜单，我们首先要将数据处理成树形结构。这里笔墨不多写了，假设我们拿到的demoData就已经是的了。

第二步，渲染数据

假设我们拿到的数据第一层是数组。

在我们的页面上只需要有一个ul以及一个我们接下来定义的组件item。这里由于我们第一层数据是数组，因此我们在这里做了一个循环。这里同时要注意vue是使用props从父组件向子组件传递数据的，因此我们绑定了:leave="leave". 第一个leave是在接下来要说的是item组件中已经定义了的属性。示例学习-树形菜单的形成---使用vue.js

下面是组件的最基础定义：它的基础结构就是我们希望包含的结构，即item的名字，以及item的子项目的列表，然后在子项目中进行递归调用这个结构。这里在对item进行递归调用时，也要注意需要传入要渲染的数据，也是通过props进行绑定

示例学习-树形菜单的形成---使用vue.js

第三实现菜单效果

通过以上两部，我们的数据就可以展现在页面上，但是这个没有任何交互效果。我们希望实现的效果是，页面打开只有一级菜单需要展示的，其它部分都是隐藏的。对于有下级菜单的部分，显示效果为粗体，同时有一个加号在一侧，点击可以打开下一级菜单，同时变成减号，点击减号下级菜单可以收起。

为了实现以上功能，我们只需要明晰几点即可：第一，我们需要知道该item是否有下一级，这里使用vue中新添加的计算属性功能。牵涉到逻辑运算的都可以放到其中。第二，我们需要显示下级菜单是否已经展开，这里可以用一个参数来表明是否开关。第三，就是展开和关上菜单。这里写一个函数，来改变存储开或者关的参数，每次点击item名字时触发即可。

示例学习-树形菜单的形成---使用vue.js

完整的代码如下