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 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
随机推荐
- Java SE 8 流库（一）
1. 流的作用 通过使用流,说明想要完成什么任务,而不是说明如何去实现它,将操作的调度留给具体实现去解决: 实例:假如我们想要计算某个属性的平均值,那么我们就可以指定数据源和属性,然后,流库就可以对计 ...
- BZOJ2957: 楼房重建（线段树&LIS）
2957: 楼房重建 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 3727 Solved: 1793[Submit][Status][Discus ...
- HDU - 4676 ：Sum Of Gcd （莫队&区间gcd公式）
Given you a sequence of number a 1, a 2, ..., a n, which is a permutation of 1...n. You need to answ ...
- RabbitMQ部署
操作步骤: 安装依赖文件 -->yum install ncurses-devel 进入opt目录创建rabbitmq目录 -->cd /opt -->mkdir rabbitMQ ...
- Html页面Dom对象之Event
HTML DOM Event 对象 实例 哪个鼠标按钮被点击? 光标的坐标是? 被按的按键的 unicode 是? 相对于屏幕,光标的坐标是? shift 键被按了吗? 哪个元素被点击了? 哪个事件类 ...
- 为什么 Windows 10 无论怎么设置一分钟后就自动关屏幕？
为什么 Windows 10 无论怎么设置一分钟后就自动关屏幕? 在设置中设置了很多方法,但不管怎么设置就是不行,不到一分钟一定关屏幕. 开始以为是能源之星引起,查了相关资料说不是,那个能源之星标志只 ...
- inline修饰虚函数的问题
虚函数是否可以内联? 一般来说,inline是编译时的行为,虚函数是在程序执行时的行为,因此编译器一般会拒绝对虚函数进行内联!
- Python 字串处理
#!/usr/bin/python #-*- coding:utf-8 –*- import os import sys import re import shutil import xlrd imp ...
- [java]经验集
Calendar c = Calendar.getInstance(); c.set(1999,12,21); SimpleDateFormat sdf = new SimpleDateFormat( ...
- Linux服务器安全之用户密钥认证登录
转自:http://blog.sina.com.cn/s/blog_6561ca8c0102vb0d.html 一. 密钥简介 在Linux下,远程登录系统有两种认证方式:密码认证和密钥认证.密码认证 ...