vue.js实现三级菜单效果

当使用vue.js框架时，实现三级菜单效果需要多个步骤。以下是其中的几个关键步骤：

步骤一：定义Vue实例中的数据结构

定义一个vue实例，包含一个数组，数组每个元素表示一个菜单项，该数组每个元素还包含以下属性：

• id：唯一标识该菜单项，每个菜单项的id值必须唯一。
• name：表示该菜单项的名称。
• children：表示该菜单项包含的子菜单，该属性的值同样是一个菜单数组。

示例：

<template>
  <div>
    <ul>
      <li v-for="menu in menus"
          :key="menu.id"
          :class="{ 'active': menu.id === activeId }"
          @click="setActive(menu.id)"
      >
        {{ menu.name }}
        <ul v-if="menu.children">
          <li v-for="subMenu in menu.children"
              :key="subMenu.id"
              :class="{ 'active': subMenu.id === activeId }"
              @click="setActive(subMenu.id)"
          >
            {{ subMenu.name }}
            <ul v-if="subMenu.children">
              <li v-for="subSubMenu in subMenu.children"
                  :key="subSubMenu.id"
                  :class="{ 'active': subSubMenu.id === activeId }"
                  @click="setActive(subSubMenu.id)"
              >
                {{ subSubMenu.name }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeId: '',
      menus: [
        {
          id: '1',
          name: 'Menu 1',
          children: [
            {
              id: '1-1',
              name: 'Menu 1-1',
              children: [
                {
                  id: '1-1-1',
                  name: 'Menu 1-1-1'
                },
                {
                  id: '1-1-2',
                  name: 'Menu 1-1-2'
                }
              ]
            },
            {
              id: '1-2',
              name: 'Menu 1-2'
            }
          ]
        },
        {
          id: '2',
          name: 'Menu 2'
        }
      ]
    };
  },

  methods: {
    setActive(id) {
      this.activeId = id;
    }
  }
};
</script>

步骤二：定义菜单项的点击事件处理函数

当菜单项被点击时，需要记录该菜单项是哪一个，以便在显示这个菜单项的子菜单时判断。因此需要定义一个处理函数，将当前点击的菜单项的id值保存在vue的data里面活跃的菜单项id属性中。

示例：

<li v-for="menu in menus"
    :key="menu.id"
    :class="{ 'active': menu.id === activeId }"
    @click="setActive(menu.id)">
    {{ menu.name }}
</li>

methods: {
  setActive(id) {
    this.activeId = id;
  }
}

步骤三：通过computed计算属性获取活跃的菜单项

定义一个computed计算属性，名为activeMenu，用于获取当前活跃的菜单项对象。如果没有活跃的菜单项，则返回空对象。

示例：

computed: {
  activeMenu() {
    let activeMenu = {};
    this.getMenus().every(menu => {
      if (menu.id === this.activeId) {
        activeMenu = menu;
        return false;
      }
      return true;
    });
    return activeMenu;
  }
}

步骤四：渲染菜单项

在页面上循环输出所有菜单项时，需要根据当前菜单项是否为活跃项，以及是否包含子菜单，来渲染不同的菜单结构。

示例：

<template>
  <div>
    <ul>
      <li v-for="menu in menus"
          :key="menu.id"
          :class="{ 'active': menu.id === activeId }"
          @click="setActive(menu.id)"
      >
        {{ menu.name }}
        <ul v-if="menu.children">
          <li v-for="subMenu in menu.children"
              :key="subMenu.id"
              :class="{ 'active': subMenu.id === activeId }"
              @click="setActive(subMenu.id)"
          >
            {{ subMenu.name }}
            <ul v-if="subMenu.children">
              <li v-for="subSubMenu in subMenu.children"
                  :key="subSubMenu.id"
                  :class="{ 'active': subSubMenu.id === activeId }"
                  @click="setActive(subSubMenu.id)"
              >
                {{ subSubMenu.name }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

三级菜单效果成功实现。