Vue: Dropdown-Menüübergang und wie man die Klasse eines anderen Elements wechselt

Question

Ich habe das (sehr einfach) verstanden:

<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>

Ich möchte ein Dropdown-Menü schreiben, das sich mit einem Übergang öffnet. Die Höhe ändert sich also in einem Übergang von 1 Sekunde von 0 auf 100 Pixel.

Deshalb denke ich, dass ein Klassenwechsel dropdownList ein guter Weg ist. Habe ich recht? Zuerst wird die Klasse mit einer Höhe von 0 abgerufen, und nach dem Klicken auf den Pfeil wird die Klasse mit einer höheren Höhe abgerufen.

Meine Frage: Wie kann ich diese Klasse mithilfe eines Klickereignisses auf den Pfeil umschalten?

Answer 1

答案：使用类绑定

由于不清楚您使用的是哪个 Vue 版本，我假设您使用的是 vue3+。

在脚本标记中，添加要在模板部分引用的 Ref 。由于您仅检查按钮是否被单击，因此使用布尔类型。

const isActive = ref(false)

然后使用类绑定（在类属性前面添加 :），通过使用 JS 三元

基本上，如果 isActive 为 true，它将把 active-dropdown-list 放在该元素上，否则它将是 inactive-dropdown-list