Vue.js示例:树型视图; 模式组件;

树型图

本示例是一个简单的树形视图实现,它展现了组件的递归使用。

mycode pen:https://codepen.io/chentianwei411/pen/KGKQxE

重点:递归是如何形成的。嵌套组件!!

如果不使用嵌套组件,而使用<li>元素的话,不会形成递归效果。

Vue.js示例:树型视图;  模式组件;

基本结构:

//组件模版结构:最外层根元素是<li>,这也是形成递归效果的必要元素。
<li>
<div></div>   //显示对象的children元素,一个数组。
<ul>           //显示children元素的子元素,都是对象。
<组件></组件>     //使用自身组件,形成递归效果。
<li></li>
</ul>
</li>

功能:

  1. 单击子元素,显示/隐藏 子元素。
  2. 双击子元素,如果子元素不是folder,则把它的格式改为数组[],并附加一个子元素对象。
  3. 单击加号+,附加一个子元素对象。

实现思路:

首先,演示数据data是一个多层嵌套的对象结构。但每层只有name和children两个key/value对儿。

其次,构思基本结构。如上图所示

上一篇:JS中的进制转换


下一篇:oracle-sql系统学习-ddl-dml