Vue : transition du menu déroulant et comment changer de classe d'un autre élément

Question

J'ai eu ça (très simple) :

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

Je souhaite écrire un menu déroulant qui s'ouvre avec une transition. La hauteur passera donc de 0 à 100 pixels en une seconde de transition.

Je pense donc que changer de classe de dropdownList est un bon moyen. Ai-je raison? D'abord, il obtient la classe avec une hauteur de 0, et après avoir cliqué sur la flèche, il obtient la classe avec une hauteur plus élevée.

Ma question : Comment basculer cette classe en utilisant un événement de clic sur la flèche ?

Answer 1

Réponse : Utiliser la liaison de classe

Comme on ne sait pas quelle version de Vue vous utilisez, je suppose que vous utilisez vue3+.

Dans la balise script, ajoutez le Ref à référencer dans la section template. Puisque vous vérifiez uniquement si le bouton a été cliqué, utilisez le type booléen.

const isActive = ref(false)

Utilisez ensuite la liaison de classe (ajoutez la valeur de :），通过使用 JS ternaire

En gros, si isActive 为 true，它将把 active-dropdown-list 放在该元素上，否则它将是 inactive-dropdown-list