-
递归
递归就是一个函数在它的函数体内调用它自身。执行递归函数将反复调用其自身,每调用一次就进入新的一层。递归函数必须有结束条件。当函数在一直递推,直到遇到墙后返回,这个墙就是结束条件。
所以递归要有两个要素,结束条件与递推关系。
递归有两个基本要素:
(1)边界条件:确定递归到何时终止,也称为递归出口。
(2)递归模式:大问题是如何分解为小问题的,也称为递归体。递归函数只有具备了这两个要素,才能在有限次计算后得出结果 。
- 可折叠的树形菜单
类似于:
代码:
父组件中的:
<template>
<div>
<Tree :tit="treeObj.name" :list="treeObj.children" :depth="0"></Tree>
</div>
</template>
<script>
import Tree from "@/views/Tree"
// 模拟得树形结构
let treeObj = {
name: '电子产品',
children: [
{
name: '电视',
children: [
{
name: 'philips',
children: [
{ name: 'philips-A' },
{ name: 'philips-B' }
]
},
{ name: 'Tcl' },
{ name: '海信' }
]
},
{
name: '电脑',
children: [
{ name: 'Mac Air' },
{ name: 'Mac Pro' },
{
name: 'ThinkPad',
children: [
{
name: 'ThinkPad-A',
children:[
{name:'ThinkPad-A-A'},
{name:'ThinkPad-A-B'},
{name:'ThinkPad-A-C'},
] },
{ name: 'ThinkPad-B' }
]
}
]
},
{
name: '可穿戴设置',
children: [
{
name: '手表',
children: [
{ name: 'iWatch' },
{ name: '小米watch' }
]
}
]
}
]
}
export default {
name: "One",
components: { Tree},
data() {
return {
treeObj
};
},
};
</script>
子组件中的
<template>
<div>
<div>
<h3 :style="indent" class="change">
<p @click="toggle">{{isShow?"-":"+"}}</p>
<p>{{tit}}</p>
</h3>
</div>
<div v-if="isShow">
<Tree
v-for="(item,key) in list"
:key="key"
:depth="depth+1"
:tit="item.name"
:list="item.children"
></Tree>
</div>
<!-- 不用递归得方法 -->
<!-- <ul>
<li v-for="(item,key) in list" :key="key">
<p>{{item.name}}</p>
<div v-for="(item,key) in item.children" :key="key">
<p>{{item.name}}</p>
<div v-for="(item,key) in item.children" :key="key">
<p>{{item.name}}</p>
</div>
</div>
</li>
</ul>-->
</div>
</template>
<script>
export default {
name: "Tree", // 通过组件自身得name名来实现组件得递归调用
data() {
return {
isShow: true
};
},
props: {
tit: {
type: String,
default: "名称"
},
list: {
type: Array
},
depth: {
type: Number,
default: 0
}
},
computed: {
indent() {
return `transform:translate(${this.depth * 20}px)`;
}
},
methods: {
toggle() {
this.isShow = !this.isShow;
}
}
};
</script>
<style lang="scss">
hr {
margin: 20px 0;
}
.change {
display: flex;
}
</style>
提示:depth就是递归终止的层数(条件)