首先在我们不确定数组有几级的情况下，我们可以使用递归来循环渲染直到数据里面等于空。
<template>
<div>
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="item-name">
<span>{{item.name}}</span>
</div>
<div v-if="item.children" class="children-item">
<list :list="item.children"></list>
</div>
</div>
</div>
</template>
<script>
//引入自定义组件
import list from "../components/list";
export default {
components: { list },
data() {
return {
list: [
{
name: "经济",
children: [
{
name: "法律",
children: [
{
name: "如家",
children: [
{
name: "政治",
children: [
{
name: "人文"
}
]
}
]
},
{
name: "每天",
children: [
{
name: "昨天",
children: [
{
name: "勾天"
}
]
}
]
}
]
},
{
name: "星期天",
children: [
{
name: "星期六",
children: [
{
name: "星期五"
}
]
},
{
name: "氢气",
children: [
{
name: "氨气",
children: [
{
name: "最迷人的最危险"
}
]
}
]
}
]
}
]
}
]
};
},
mounted() {
console.log(0.1 + 0.2);
console.log((0.1 * 10 + 0.2 * 10) / 10);
},
methods: {
/*
var add = function (a, b) {
console.log(arguments); //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
return a + b;
};
// var add = (a, b) => {
// console.log(arguments); // ReferenceError: arguments is not defined
// return a + b;
// };
add(1, 2);
*/
}
};
</script>
<style>
</style>
其次就是组件页面
<div class="">
<div class="" v-for="(item,index) in list" :key="index">
<div class="" style="padding-left: 20rpx;">
{{item.name}}
</div>
<div class="" v-if="item.children != ''" style="padding-left: 50rpx;">
<!-- 这里判断当前是否是最后一个数组，用来做一些处理 -->
<!--引用自身，实现递归 这里一定要判断，listt 组件递归地渲染 item.children 的子数组，如果子数组存在并且不为空，就会继续渲染 list 组件。-->
<list :list="item.children" v-if="item.children && item.children.length > 0"></list>
<div class="" v-else>
最后一级展示--做一些相应的处理
</div>
</div>
</div>
</div>
</template>
<script>
export default {
//一定要写 name: 'list' 不然会报错 也就是组件的名字 组件自身调用自身
name: 'list',
props: {
list: Array
},
data() {
return {
}
},
methods: {
},
}
</script>
<style>
</style>
最后效果展示！！！
大功告成。。。
