处理有时没办法列表的子元素有多少层嵌套 处理后效果如下 vue的代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> </head> <body> <div id="app"> <menu1 :data='list'></menu1> </div> <script> // 使用组件方法解决 定义一个组件 如果有children 就一直调用下去 跟递归思路一样 Vue.component('menu1', { props: ['data'], template: `<ul> <li v-for="item in data" :key=item.name>{{item.name}} <menu1 v-if="item.children" :data="item.children"></menu1> </li> </ul>` }) var app = new Vue({ el: '#app', data() { return { list: [{ name: 'a', children: [ { name: 'a1', children: [ { name: 'a1-1' } ] }, { name: 'a2' } ] }, { name: 'b' }] } }, }) </script> </body> </html>jq的代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 先导入jq --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 处理数组结构如下 var list = [{ name: 'a', children: [ { name: 'a1', children: [ { name: 'a1-1' } ] }, { name: 'a2' } ] }, { name: 'b' }] // list:要传入的结构树 node:从哪个节点开始生成 这里从body开始 function createList(list, node) { // 创建ul节点 var ul = $('<ul></ul>') // 遍历节点 list.forEach(element => { ul.append(`<li>${element.name}</li>`) // 如果有子节点就再调用函数生成一次 if (element.children) { createList(element.children, ul) } }) // 实例化节点 node.append(ul) } createList(list, $('body')) </script> </body> </html>