原生js实现递归渲染
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>后台
<!-- <ul>
<li>数据库</li>
</ul> -->
</li>
<li>前端
<!-- <ul>
<li>vue</li>
</ul> -->
</li>
</ul>
</body>
<script>
let treeData = [
{
name:"后台",
children: [
{
name: "数据库",
}, {
name: "服务器",
}, {
name: "java",
}
]
},{
name:"前端",
children: [
{
name: "vue",
}, {
name: "react",
}, {
name: "angular",
}
]
}
]
// 纯字符串拼接
// let str = "";
// str += "<ul>"
// for(var i = 0; i < treeData.length; i ++) {
// str += "<li>" + treeData[i].name +
// if(treeData[i].children.length > 0) {
// for(var j = 0; j < treeData[i].children[j].length; j ++ ) {
// "<ul>" +
// "<li>" + treeData[i].children[j].name + "</li>" +
// "</ul>"
// }
// }
// + "</li>"
// }
// str +="</ul>"
// document.body.innerHTML = str;
// 递归
// let str = "";
// function recur(tree) {
// for(var i = 0; i < tree.length; i ++) {
// str += `
// <ul>
// <li>${tree[i].name}</li>
// ${tree[i].children.length > 0 && recur(tree[i].children)}
// </ul>
// `
// }
// }
// recur(treeData);
// document.body.innerHTML = str;
//
var loop = (treeData) => {
return treeData.map(e => {
return e.children?
`<div>
<div>${e.name}</div>
<ul>
<li style="padding-left: 20px">${loop(e.children)}</li>
</ul>
</div>
`
:
`
<div>
${e.name}
</div>
`
})
}
var html = loop(treeData).join("");
console.log(html);
document.body.innerHTML = html
</script>
</html>
Vue2.0递归组件
网友评论