VUE3—无限级菜单渲染




<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      <span>{{ item.label }}</span>
      <ul v-if="item.children" class="submenu">
        <!-- 递归地调用自己，并传递子菜单项 -->
        <menu-item :menu-items="item.children"></menu-item>
      </ul>
    </li>
  </ul>
</template>
 
<script>
export default {
  name: 'MenuItem',
  props: {
    menuItems: Array
  }
}
</script>

这个例子中，我们定义了一个名为MenuItem的Vue组件，它接受一个menuItems数组作为prop。在模板中，我们使用v-for来遍历这个数组，并为每个菜单项输出相应的HTML结构。如果该项有子菜单，我们再次使用MenuItem组件来递归地渲染子菜单项。这样就可以无限级地渲染菜单了。

VUE3—无限级菜单渲染

评论已关闭

推荐阅读