二级菜单联动vue.js

在Vue.js中实现二级菜单联动通常涉及到组件嵌套和数据驱动。你可以创建一个包含多个子菜单的父组件，每个子菜单代表一级菜单，然后每个子菜单内又有其对应的子菜单项。当用户点击一级菜单时，你可以通过修改数据（比如数组或对象），控制显示的二级菜单内容。

下面是一个简单的示例：

<template>
  <div>
    <ul>
      <!-- 一级菜单 -->
      <li v-for="(item, index) in firstMenuItems" :key="index">
        <a @click="selectFirstItem(index)">
          {{ item.name }}
        </a>
        <!-- 二级菜单 -->
        <ul v-if="showSecondMenu[index]">
          <li v-for="(secondItem, secondIndex) in item.secondMenuItems" :key="secondIndex">
            <a>{{ secondItem.name }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstMenuItems: [
        { name: '菜单一', secondMenuItems: [] },
        { name: '菜单二', secondMenuItems: [] }
      ],
      showSecondMenu: Array(2).fill(false)
    };
  },
  methods: {
    selectFirstItem(index) {
      this.showSecondMenu[index] = !this.showSecondMenu[index];
    }
  }
};
</script>

在这个例子中，当你点击`firstMenuItems`列表中的一个元素，`selectFirstItem`方法会被触发，切换对应索引位置的`showSecondMenu`值，从而控制二级菜单的显示状态。