VUE递归树形目录（vue递归组件）的使用
1、html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 递归模板 -->
<template id="diguiTempTest">
<li>
<div :class="{bold: isFolder}">
{{model.data.menuName}}
</div> <ul v-if="isFolder">
<item class="item" :model="test" v-for="test in model.childTreeNode"> </item>
</ul> </li>
</template>
</div>
<h1>递归组件测试</h1>
<div id="diguiTest">
<ul v-for="model in message">
<item class="item" :model="model"></item>
</ul>
</div> <input type="button" value="更改" onclick="test6666()"/>
</body>
</html>
2、js
<script type="text/javascript">
Vue.component('item', {
template: '#diguiTempTest',
props: ['model'],
computed: {
isFolder: function () {
if(this.model.childTreeNode.length == 0) {
return false;
}else {
return true;
}
}
}
})
var vm = new Vue({
el : "#diguiTest",
data : {
message : [{
"id": "1",
"data": {
"menuName": "项目管理",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"menuName": "项目",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "我的任务",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}]
}, {
"id": "2",
"data": {
"menuName": "数据统计",
"menuCode": "BusClock",
},
"childTreeNode": []
}, {
"id": "3",
"data": {
"menuName": "人事管理",
"menuCode": "",
},
"childTreeNode": []
}, {
"id": "4",
"data": {
"menuName": "基础管理",
"menuCode": "",
},
"childTreeNode": []
}]
},
})
function test6666() {
var data = [{
"id": "1",
"data": {
"menuName": "项目管理6966",
"menuCode": "",
},
"childTreeNode": [{
"data": {
"menuName": "项目666",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "我的任务",
"menuCode": "BusProject",
},
"childTreeNode": []
}, {
"data": {
"menuName": "人员周报",
"menuCode": "BusProject",
},
"childTreeNode": []
}]
}, {
"id": "2",
"data": {
"menuName": "数据统计",
"menuCode": "BusClock",
},
"childTreeNode": []
}, {
"id": "3",
"data": {
"menuName": "人事管理",
"menuCode": "",
},
"childTreeNode": []
}, {
"id": "4",
"data": {
"menuName": "基础管理",
"menuCode": "",
},
"childTreeNode": []
}]
}
</script>
3、结果
VUE递归树形目录（vue递归组件）的使用的更多相关文章
- Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- vue从入门到进阶：组件Component详解（六）
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- vue项目的骨架及常用组件介绍
vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...
- 如何用vue实现树形菜单？
在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...
- 深入vue - 源码目录及构建过程分析
公众号原文链接:深入vue - 源码目录及构建过程分析 喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 “ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...
- Vue 入门之目录结构介绍
Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
随机推荐
- MySQL 5.7忘记密码
关闭正在运行的 MySQL : 1 [root@www.woai.it ~]# service mysql stop 运行 1 [root@www.woai.it ~]# mysqld_safe -- ...
- DDMS介绍
DDMS全称:Dalvik Debug Monitor Service 一,DDMS的作用 它提供了截屏.查看线程和堆信息.logcat.进程.广播状态信息.模拟来电呼叫和短信.虚拟地理坐标等等. 二 ...
- Openlayers4中地图的导出
概述: 本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域.Geoserver11 WMS跨域等. 效果: 导出图片 页面展示 实现代码: document.getElementByI ...
- JavaScript的this原理
this原理 理解下面两种写法,可能有不一样的结果. var obj = { foo: function () {} }; var foo = obj.foo; // 写法一 obj.foo() // ...
- 转：MyISAM 和 InnoDB 讲解
InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持.MyISA ...
- 《DSP using MATLAB》 Problem 2.3
本题主要是显示周期序列的. 1.代码: %% ------------------------------------------------------------------------ %% O ...
- Error in WCF client consuming Axis 2 web service with WS-Security UsernameToken PasswordDigest authentication scheme
13down votefavorite 6 I have a WCF client connecting to a Java based Axis2 web service (outside my c ...
- 设计模式(Python)-观察者模式
本系列文章是希望将软件项目中最常见的设计模式用通俗易懂的语言来讲解清楚,并通过Python来实现,每个设计模式都是围绕如下三个问题: 为什么?即为什么要使用这个设计模式,在使用这个模式之前存在什么样的 ...
- 固件_Linux内核
1.相关函数 .相关函数 int request_firmware_nowait( struct module *module, bool uevent, const char *name, stru ...
- nats 学习 request/reply 模式基本使用
nats 一个云原生的消息系统,使用简单,客户端丰富,支持的模式是pub/sub 但是集成比较灵活,可以支持loadblance, request/reply pub/sub 代码演示的是reques ...