vue3 dropdown

Vue3中的下拉菜单（dropdown）可以通过使用Vue的组件来实现。下面是一个简单的示例：

首先，你需要安装Vue3的依赖。你可以使用npm或者yarn来安装。

npm install vue@next

或者

yarn add vue@next

接下来，在你的Vue文件中，你可以创建一个Dropdown组件。在这个组件中，你可以使用Vue的响应式数据来控制下拉菜单的状态。

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">Toggle Dropdown</button>
    <ul v-if="isOpen">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      isOpen: ref(false)
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style>
.dropdown button {
  display: block;
}
.dropdown ul {
  display: none;
}
.dropdown ul li {
  list-style: none;
}
.dropdown ul.visible {
  display: block;
}
</style>

在上面的代码中，