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 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...
随机推荐
- mybatis单笔批量保存
在上一篇写了接口调用解析返回的xml,并赋值到实体.这一篇主要介绍,如何保存实体数据. 一,xml样例 <?xml version="1.0" encoding=" ...
- ssh命令的使用
ssh命令是用来远程登录服务器的,默认端口号为22. 常用的命令是: ssh 用户名@服务器地址 然后回车,输入登录服务器的密码 登录服务器后要进行上传下载文件,可以用scp命令,命令格式为: s ...
- POJ2942 Knights of the Round Table【Tarjan点双联通分量】【二分图染色】【补图】
LINK 题目大意 有一群人,其中有一些人之间有矛盾,现在要求选出一些人形成一个环,这个环要满足如下条件: 1.人数大于1 2.总人数是奇数 3.有矛盾的人不能相邻 问有多少人不能和任何人形成任何的环 ...
- C#典型案例及分析
1.简单工厂计算器
- 【C#】Lambda
介绍 Lambda 表达式是一种可用于创建 委托 或 表达式目录树 类型的 匿名函数 . 通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数. Lambda 表达式对 ...
- hasura graphql pg 自定义函数的使用
hasura graphql 的安装可以参考相关项目 创建函数 数据表创建 CREATE TABLE sql_function_table ( id SERIAL PRIMARY KEY, inp ...
- C#拦截系统消息
首先我们看下有哪几种拦截系统消息的方法: //一.截取系统消息//方法一://添加监视消息private void Form_Load(object sender, System.EventArgs ...
- php如何获取服务器所在的时区
//获取默认时区echo date_default_timezone_get(); //将时区设置为中国date_default_timezone_set("PRC"); //将时 ...
- sdk manager 代理,解决下载速度慢的问题
原文:http://blog.csdn.net/android_panda/article/details/18598883 地址:mirrors.neusoft.edu.cn 端口:80 要勾选:F ...
- Apache Commons Codec 与消息摘要算法(hash算法)
首先我们要明白 Codec 是什么含义.它是 Coder + decoder = Codec,也就是编码器解码器.即是编码器,也是解码器. 官网地址:http://commons.apache.org ...