Vue.js Vue.js中的下拉菜单（切换活动菜单）

在本文中，我们将介绍如何在Vue.js中创建一个下拉菜单，并实现切换活动菜单的功能。

1. 创建一个下拉菜单组件

首先，我们需要创建一个Vue组件来表示下拉菜单。可以使用Vue的单文件组件（.vue文件）来实现。

创建一个名为DropdownMenu.vue的文件，并在其中编写以下代码：

<template>
  <div class="dropdown-menu">
    <button class="dropdown-menu__button" @click="toggleMenu">
      {{ activeMenu }}
    </button>
    <ul v-if="isOpen" class="dropdown-menu__list">
      <li v-for="menu in menus" :key="menu" @click="selectMenu(menu)">
        {{ menu }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      activeMenu: 'Select Menu',
      menus: ['Menu 1', 'Menu 2', 'Menu 3']
    };
  },
  methods: {
    toggleMenu() {
      this.isOpen = !this.isOpen;
    },
    selectMenu(menu) {
      this.activeMenu = menu;
      this.isOpen = false;
    }
  }
};
</script>

<style scoped>
.dropdown-menu {
  position: relative;
}

.dropdown-menu__button {
  appearance: none;
  padding: 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
}

.dropdown-menu__list {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
}

.dropdown-menu__list li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu__list li:hover {
  background: #f9f9f9;
}
</style>

在上面的代码中，我们定义了一个名为DropdownMenu的Vue组件。组件内部有一个按钮（button）和一个无序列表（ul）来展示下拉菜单的选项。通过控制isOpen属性的值，我们可以显示或隐藏下拉菜单。activeMenu属性则表示当前选中的活动菜单。

2. 在父组件中使用DropdownMenu组件

在需要使用下拉菜单的父组件中，可以通过引入DropdownMenu组件并在模板中使用它来创建一个下拉菜单。

<template>
  <div>
    <h1>Vue.js Dropdown Menu</h1>
    <DropdownMenu />
  </div>
</template>

<script>
import DropdownMenu from './DropdownMenu.vue';

export default {
  components: {
    DropdownMenu
  }
};
</script>

在上面的代码中，我们在父组件中引入了之前创建的DropdownMenu组件，并在模板中使用了它。现在，我们可以在父组件中看到一个简单的下拉菜单。