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