Vue和JQuery使用递归生成树状菜单

最新推荐文章于 2023-03-10 15:55:45 发布

zyzs

最新推荐文章于 2023-03-10 15:55:45 发布

阅读量286

点赞数

本文链接：https://blog.csdn.net/lszyzs/article/details/107133787

版权

处理有时没办法列表的子元素有多少层嵌套
处理后效果如下
在这里插入图片描述
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>