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 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
随机推荐
- L206
There are so many new books about dying that there are now special shelves set aside forthem in book ...
- mt7601u: probe of xxxx failed with error -2
/************************************************************************ * mt7601u: probe of xxxx f ...
- linux下文件解压
这几天要学THINKPHP框架了,于是从网上下载了一个压缩包,后缀是.zip的,解压方法为 unzip ###.zip 随便把linux下的.rar方法也写下来,这两个都不常见. unrar e ...
- appium使用
学过selenium的朋友再来看appium,基本上就是一个环境折腾问题,还有一个就是初始化Driver的问题,以下代码是初始化Driver WebDriver driver = null; // 驱 ...
- 在Flask中使用Celery的最佳实践
写在前面 本最佳实践是基于作者有限的经验,欢迎大家共同讨论,可以持续维护此最佳实践.另本文中所使用的环境为Mac&Ubuntu环境,软件版本如下: Celery (4.1.0) Flask ( ...
- sysfs文件系统学习--sysfs
一.sysfs简介1.sysfs就是利用VFS的接口去读写kobject的层次结构,建立起来的文件系统.其更新与删除是那些xxx_register()/unregister()做的事 情.从sysfs ...
- streamsets Processors 说明
Processors 表示对于一种数据操作处理,在pipeline中可以应用多个Processors, 同时根据不同的执行模式,可以分为独立模式的,集群模式.边缘模式(agent),以及 帮助测试的测 ...
- elasticsearch安装入门
简介Elasticsearch是一个高度可扩展的开源的分布式Restful全文搜索和分析引擎. 它允许用户快速的( 近实时的) 存储. 搜索和分析海量数据. 它通常用作底层引擎技术, 为具有复杂搜索功 ...
- 【转】Ubuntu13.04配置：Vim+Syntastic+Vundle+YouCompleteMe
原文网址:http://www.cnblogs.com/csuftzzk/p/3435710.html 序言 使用Ubuntu和vim已经有一段时间了,对于Vim下的插件应用,我总是抱着一股狂热的态度 ...
- vim配置之tagbar
vimConfig/plugin/tagbar-setting.vim let g:tagbar_width=4 map <F12> :TagbarToggle<CR> map ...