纯Vue实现侧边菜单栏手风琴效果

最新推荐文章于 2025-07-07 10:59:23 发布

张三无语

最新推荐文章于 2025-07-07 10:59:23 发布

阅读量1.6w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue 侧边栏手风琴效果

本文链接：https://blog.youkuaiyun.com/weixin_42024362/article/details/80519987

本文详细介绍了如何使用Vue.js框架，不依赖任何第三方库，纯JavaScript实现一个响应式的侧边菜单栏手风琴效果。通过组件化的方式，结合Vue的指令和生命周期钩子，实现了菜单项的展开与收起，以及选中状态的切换。同时，文章还讨论了如何处理菜单的递归结构，确保无限层级的菜单都能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="asideBox">
      <aside>
        <ul class="asideMenu">
          <li v-for="(item,index) in menuList">
            <div class="oneMenu" @click="showToggle(item,index)">
              <img v-bind:src="item.imgUrl" />
              <span>{
  
  {item.name}}</span>
            </div>
            <ul v-show="item.isSubShow">
              <li v-for="subItem in item.subItems">
                <div class="oneMenuChild">{
  
  {subItem.name}}</div>
              </li>
            </ul>
          </li>
        </ul>
      </aside>
    </div>
</template>