vue的递归组件以及三级菜单的制作
js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性
父组件:slotDemo.vue:
<template>
<div>
<!-----递归组件----->
<ul>
<simple3 :tree="item" v-for="item in tree"></simple3>
</ul> </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
li
padding-left 30px
</style>
<script>
import simple3 from "./simple/simple3.vue";
export default{
data(){
return {
tree: [{
label: "一级菜单",
test:1,
children: [{
label: "二级菜单",
test:2,
children: [{
label: "三级菜单",
test:3
}]
}]
}]
}
}, components: { simple3
}
}
</script>
子组件:simple3.vue
<template>
<li>
<a>{{tree.label}}</a>
<simple3 v-if="tree.children" :tree="item" v-for="item in tree.children" :class="item.test==2?'test2':'test3'"></simple3> </li>
</template>
<style rel="stylesheet/stylus" lang="stylus">
.test2
list-style disc .test3
list-style decimal
</style>
<script>
export default{
name: "simple3",
props: ["tree"]
}
</script>
上面是一个子组件,定义了 name 为 simple03,然后在模板中调用自身,结合 v-for 实现递归
为了防止出现死循环,在调用自身的时候,加入了 v-if 作为判定条件
父组件中调用的时候,需要通过 props 传入一个 tree;
为了对每一级菜单有所区分,我对tree里面的每一个子集合里面加了一个test字段来区分是哪一级的菜单然后对其不同的样式进行处理
最后的效果:
vue的递归组件以及三级菜单的制作的更多相关文章
- Vue.js 递归组件实现树形菜单
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 谈谈Vue的递归组件
2月最后一天,而且还四年一遇,然而本月居然一篇博客没写,有点说不过去.所以,今天就来谈谈Vue的递归组件.我们先来看一个例子: See the Pen 递归组件 by imgss (@imgss) o ...
- 用Vue.js递归组件构建一个可折叠的树形菜单
在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: `<!--Invoking myself! ...
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue中递归组件的使用
2019独角兽企业重金招聘Python工程师标准>>> 递归 简单来讲就是程序自己调用自身. vue中的递归组件就是,组件自身调用自身. 父组件 <template> & ...
- vue之递归组件实现树形目录
递归组件的应用===>可以通过组件命名来自己使用自己的组件 实例如下 父组件 <div class="content"> <detail-list :lis ...
- vue第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
随机推荐
- 如何使用Android MediaStore裁剪大图片
译者按:在外企工作的半年多中花了不少时间在国外的网站上搜寻资料,其中有一些相当有含金量的文章,我会陆陆续续翻译成中文,与大家共享之.初次翻译,“信达雅”三境界恐怕只到信的层次,望大家见谅! 这篇文章相 ...
- Oracle相关操作示例(导出导入dmp需要采用)
删除用户:drop user pnxd cascade; 导出数据:exp pnxd/padmin@A file=c:\bb.dmp full=y 导入数据:imp pnxd/padmin@PNXD ...
- numpy 文件存取 npy、npz
转处:http://blog.csdn.net/pipisorry/article/details/39088003 NumPy提供了多种文件操作函数方便我们存取数组内容. 文件存取的格式:二进制和文 ...
- ngModelController的方法和属性的使用
ngModelController方法 $render(); 当视图需要更新的时候会被调用.使用ng-model的指令应该自行实现这个方法. $isEmpty(value); 该方法用于判断输入值是否 ...
- java的装箱拆箱是什么?
是什么? 自动装箱就是Java自动将原始类型值转换成对应的对象,比如将int的变量转换成Integer对象,这个过程叫做装箱,反之将Integer对象转换成int类型值,这个过程叫做拆箱. 为什么 把 ...
- nodejs之util工具
util是nodejs的一大核心模块,用来提供常用函数的集合 1.util.inherits(实现对象原型继承) 概要:js的继承是基于原型的,本身并没有继承的语言特性,仅仅是通过复制原型的方式来实现 ...
- poj3250单调栈
有n只羊,(姑且算是羊吧,也有可能是牛啊猫啊什么之类的),每只羊都有一个身高,前面的羊要看到后面的羊的条件是,后面的羊高度要小于前面的羊,就问各位羊加起来看到的牛多少只....... #include ...
- 使用python对mysql主从进行监控,并调用钉钉发送报警信息
1.编写python的监控脚本 A.通过获取mysql库中的状态值来判断这个mysql主从状态是否正常 B.进行两个状态值的判断 C.进行调取钉钉机器人,发送消息 2.设置定时任务进行脚本运行 cro ...
- 基于html5制作3D拳击游戏源码下载
今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...
- java strtus2 拦截器(Interceptors)
在strtus2 中有一个比较重要的东西就是拦截器(Interceptors) 拦截器可以做到在已有的业务中插入一块共通的,比如在一个业务中,直接插入一串登录功能,就不用去每个页面一个个去显示是否登录 ...