Vue：下拉式選單轉換以及如何切換另一個元素的類

Question

我得到了這個（非常簡單）：

<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 的類，點選箭頭後它得到的是高度較高的類。

我的問題：如何使用箭頭上的點擊事件切換該類別？

Answer 1

答案：使用類別綁定

由於不清楚您使用的是哪個 Vue 版本，我假設您使用的是 vue3 。

在腳本標記中，新增要在範本部分引用的 Ref 。由於您僅檢查按鈕是否已單擊，因此使用布林類型。

const isActive = ref(false)

然後使用類別綁定（在類別屬性前面加上:），透過使用isActive 的值有條件地將類別放在標籤上en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" rel="nofollow noreferrer">JS 三元

#

基本上，如果isActive 為true，它將把active-dropdown-list 放在該元素上，否則它將是inactive-dropdown-list