原生js中的写法
- 递归 + 字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="list"></div>
<script>
var data = [
{
name: "手机/运营商",
child: [
{
name: "热门分类",
child: [
{name: '手机卡'},
{name: '宽带'},
{name: '5G流量'},
]
},
{
name: "品牌",
child: [
{
name: "中国移动",
child: [
{name: "湖南移动"},
{name: "广东移动"},
{name: "上海移动"},
],
},
{
name: "中国电信",
child: [
{name: "湖南电信"},
{name: "广东电信"},
{name: "上海电信"},
],
},
],
}
]
},
{
name: "旅游地",
child: [
{
name: "湖南旅游",
child: [
{name: '张家界'},
{name: '凤凰古城'},
]
}
]
}
];
function createTree(data, str = "<ul>") {
for(let i = 0; i < data.length; i++) {
str += `<li>${data[i].name}`;
let childData = data[i].child;
if(childData && childData.length > 0) {
str += createTree(childData);
}
str += `</li>`;
}
str += `</ul>`;
return str;
}
window.onload = function() {
var str = '';
str = createTree(data);
document.querySelector(".list").innerHTML = str;
}
</script>
</body>
</html>
- 视图如下:
vue3.x的实现
- yarn create vite创建项目
数据文件 data/tree.js
export let data = [
{
name: "手机/运营商",
child: [
{
name: "热门分类",
child: [
{name: '手机卡'},
{name: '宽带'},
{name: '5G流量'},
]
},
{
name: "品牌",
child: [
{
name: "中国移动",
child: [
{name: "湖南移动"},
{name: "广东移动"},
{name: "上海移动"},
],
},
{
name: "中国电信",
child: [
{name: "湖南电信"},
{name: "广东电信"},
{name: "上海电信"},
],
},
],
}
]
},
{
name: "旅游地",
child: [
{
name: "湖南旅游",
child: [
{name: '张家界'},
{name: '凤凰古城'},
]
}
]
}
];
App.vue
<template>
<Tree :data="data"/>
</template>
<script setup>
import Tree from './components/Tree.vue';
import { data } from "./data/tree.js"
</script>
Tree.vue
<template>
<div class="lists">
<tree-item v-for="(v, i) in data" :key="i" :item="v" />
</div>
</template>
<script setup>
import { defineProps } from "vue";
import TreeItem from './TreeItem.vue'
const { data } = defineProps({
data: {
type: Array,
default: () => []
}
})
</script>
TreeItem.vue
<template>
<ul>
<li>
{{ item.name }}
<template v-if="item.child && item.child.length">
<tree-item v-for="(v, i) in item.child" :key="i" :item="v" />
</template>
</li>
</ul>
</template>
<script setup>
import { defineProps } from "vue";
const { item } = defineProps({
item: {
type: Array,
default: () => []
}
})
</script>
- 图示如下:
