树型图

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

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

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

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

基本结构:

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

功能:

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

实现思路:

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

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

Vue.js示例:树型视图; 模式组件;的更多相关文章

  1. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. vue.js不仅是一种模式,也是一种工程组织方式

    vue.js不仅是一种模式,也是一种工程组织方式

  3. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  4. Vue.js基础语法(二)组件

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...

  5. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  6. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  7. Vue.js示例:GitHub提交(watch数据,created钩子,filters过滤); 网格组件(功能:1.检索,2排序);

    GitHub提交 codePen:   https://codepen.io/chentianwei411/pen/wEVPZo 注意:频繁看案例,可能会被限制. 重点: 表单输入绑定, 单选按钮的使 ...

  8. Vue.js示例:文本编辑器。使用_.debounce()反抖动函数

    Markdown编辑器 https://cn.vuejs.org/v2/examples/index.html 新知识: Underscore.js库 用于弥补标准库,方便了JavaScript的编程 ...

  9. 《vue.js实战》练习---数字输入框组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. python使用pip下载模块

    举例下载串口模块pyserial: 下载安装了python之后,打开cmd,在python的安装目录里,搜索pip,把pip3.7.exe拖进cmd,然后输入pip3.7.exe install py ...

  2. 通过SIMPLE_DEV_PM_OPS定义suspend和resume函数【转】

    本文转载自:https://blog.csdn.net/tiantao2012/article/details/77851782 通过SIMPLE_DEV_PM_OPS 定义这个驱动的suspend和 ...

  3. CF113D 高斯消元、dp

    题目链接 https://codeforces.com/contest/113/problem/D 思路 \(k[i]=\frac{1-p[i]}{ru[i]}\) f[i][j]表示经过i和j的次数 ...

  4. Docker中的Cgroup Driver:Cgroupfs 与 Systemd

    在安装kubernetes的过程中,会出现 failed to create kubelet: misconfiguration: kubelet cgroup driver: "cgrou ...

  5. Concepts-->Migrations

    https://flywaydb.org/documentation/migrations Overview With Flyway all changes to the database are c ...

  6. C# 截取 byte 字节 转字符串

    byte[] byteArray = System.Text.Encoding.Default.GetBytes(content); Byte[] ThisByte = new Byte[1];Buf ...

  7. [jsp & thymeleaf] - jsp和thymeleaf的共存解析

    做项目时因为有些老jsp还需要测试用到,所以之前的thymeleaf也需要保持,配置如下: https://github.com/deadzq/jsp-thymeleaf 等空余时间在做详解吧!

  8. 【转载】ASP.NET页面之间传值的方式之QueryString(个人整理)

    转自: https://www.cnblogs.com/kudsu/p/7694637.html QueryString Querystring也叫查询字符串,这种页面间传递数据是利用网页地址URL. ...

  9. facebook api之Access and Authentication

    Access and Authentication There are three access levels to the Marketing APIs. You can upgrade acces ...

  10. 网络通信 & 初识socket

    本节主要内容: 1.客户短\服务端架构 2.网络通信的流程 3.初识socket 一.客户端\服务端架构 客户端\服务端架构: 即Client/Server (C/S) 结构,是大家熟知的软件系统体系 ...