我想做一个下拉菜单,当我点击其中一个项目时,下拉菜单会改变,但我不知道如何实现这个功能,也没有找到相关的信息。这是我的代码:
<div>
<div class="relative">
<!-- Dropdown toggle button -->
<button
@click="show = !show"
class="flex items-center text-gray-500 rounded-md"
>
<span class="">Language</span>
</button>
<!-- Dropdown menu -->
<div
v-show="show"
class="
absolute right-0 py-2 mt-5
rounded-md shadow-xl w-36 bg-white
"
>
<router-link
to="/"
class="
inline-flex
w-full px-4 py-2
text-sm text-gray-500
hover:bg-indigo-200 hover:text-indigo-600
"
>
<img src="../Assets/Img/en.png" alt="" class="w-6 h-4 mr-2">
English
</router-link>
<router-link
to="/"
class="
inline-flex w-full px-4 py-2
text-sm text-gray-500
hover:bg-indigo-200 hover:text-indigo-600
"
>
<img src="../Assets/Img/fr.png" alt="" class="w-6 h-4 mr-2">
French
</router-link>
<router-link
to="/"
class="
inline-flex w-full px-4 py-2 text-sm text-gray-500
hover:bg-indigo-200 hover:text-indigo-600
"
>
<img src="../Assets/Img/de.png" alt="" class="w-6 h-4 mr-2">
German
</router-link>
<router-link
to="/"
class="
inline-flex w-full px-4 py-2 text-sm text-gray-500
hover:bg-indigo-200 hover:text-indigo-600
"
>
<img src="../Assets/Img/pt.png" alt="" class="w-6 h-4 mr-2">
Portuguese
</router-link>
</div>
</div>
我想要的是,在这里输入图像描述