我得到了這個（非常簡單）：
<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 的類，點選箭頭後它得到的是高度較高的類。
我的問題：如何使用箭頭上的點擊事件切換該類別？
答案：使用類別綁定
由於不清楚您使用的是哪個 Vue 版本，我假設您使用的是 vue3 。
在腳本標記中，新增要在範本部分引用的 Ref 。由於您僅檢查按鈕是否已單擊，因此使用布林類型。
然後使用類別綁定（在類別屬性前面加上
#:），透過使用isActive 的值有條件地將類別放在標籤上en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" rel="nofollow noreferrer">JS 三元基本上，如果
isActive為true，它將把active-dropdown-list放在該元素上，否則它將是inactive-dropdown-list