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递归组件）的使用的更多相关文章

  1. Vue一个案例引发的递归组件的使用

    今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  4. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  5. vue从入门到进阶：组件Component详解（六）

    一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...

  6. vue项目的骨架及常用组件介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...

  7. 如何用vue实现树形菜单？

    在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...

  8. 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ​“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...

  9. Vue 入门之目录结构介绍

    Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当 ...

随机推荐

  1. Scrum立会报告+燃尽图（3）选题

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2193 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...

  2. IIR滤波器设计（调用MATLAB IIR函数来实现）

    转载请注明文章来源 – http://blog.csdn.net/v_hyx ,请勿用于任何商业用途         对于滤波器设计,以前虽然学过相关的理论(现代数字信号处理和DSP设计),但一直不求 ...

  3. @Transactional、Spring的声明式事务

    传送门 一.Spring的声明式事务 需要在xml文件中配置 <!--配置事务管理器类--> <bean id="transactionManager" clas ...

  4. BZOJ4644: 经典傻逼题【线段树分治】【线性基】

    Description 这是一道经典傻逼题,对经典题很熟悉的人也不要激动,希望大家不要傻逼. 考虑一张N个点的带权无向图,点的编号为1到N. 对于图中的任意一个点集 (可以为空或者全集),所有恰好有一 ...

  5. 《DSP using MATLAB》示例 Example 10.2

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  6. AbstractBeanDefinition：lenientConstructorResolution属性源码分析

    版本:spring-framework-4.1 一概述 在看AbstractBeanDefinition源码时,注意到lenientConstructorResolution属性有诸多不疑,现在通过示 ...

  7. php生成文字图片效果

    php生成文字图片效果最近看到php的GD功能,试着做了一个基本生成文字图片效果的代码: 显示文字图片页面:demo.php<?php$str = $_REQUEST['str'] ? $_RE ...

  8. 【BZOJ4445】[SCOI2015]小凸想跑步（半平面交）

    [BZOJ4445][SCOI2015]小凸想跑步(半平面交) 题面 BZOJ 洛谷 题解 首先把点给设出来,\(A(x_a,y_a),B(x_b,y_b),C(x_c,y_c),D(x_d,y_d) ...

  9. thinkpad t420安装debian需要注意的细节

    关闭双显卡,使用集成显卡,32位可以用独显跑起来,但是64位的wheezy只能兼容集成显卡,不知道为啥,否则会在某些usb插入/或者拔出来以后,重启提示 failed to execute /lib/ ...

  10. Java 迭代器 Iterator

    迭代器模式 迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 迭代器模式属于行 ...