我得到了这个（非常简单）：
1
912<div class="dropdownMenuWrapper">
<ul class="dropdownMenu">
<li class="dropdownMenuItem"> Menu 1 </li>
<button class="arrow" @click="toggleActive">></button>
</ul>
</div>
<div class="dropdownListWrapper">
<ul class="dropdownList">
<li class="dropdownItem">DropdownItem</li>
<li class="dropdownItem">DropdownItem</li>
<li class="dropdownItem">DropdownItem</li>
</ul>
</div>
我想编写一个下拉菜单，该菜单通过过渡打开。因此高度会在 1 秒的过渡中从 0 变为 100 像素。
所以我认为切换dropdownList的类是一个很好的方法。我对吗？首先它得到的是高度为 0 的类，单击箭头后它得到的是高度更高的类。
我的问题：如何使用箭头上的单击事件切换该类？
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
答案：使用类绑定
由于不清楚您使用的是哪个 Vue 版本，我假设您使用的是 vue3+。
在脚本标记中，添加要在模板部分引用的 Ref 。由于您仅检查按钮是否被单击，因此使用布尔类型。
然后使用类绑定（在类属性前面添加
:），通过使用 JS 三元基本上，如果
isActive为 true，它将把active-dropdown-list放在该元素上，否则它将是inactive-dropdown-list