Vue: Peralihan menu lungsur turun dan cara menukar kelas elemen lain

Question

Saya mendapat ini (sangat mudah):

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

Saya ingin menulis menu lungsur turun yang dibuka dengan peralihan. Jadi ketinggian akan berubah dari 0 hingga 100 piksel dalam peralihan 1 saat.

Jadi saya rasa menukar kelas dropdownList adalah pendekatan yang baik. Adakah saya betul? Mula-mula ia mendapat kelas dengan ketinggian 0, dan selepas mengklik anak panah ia mendapat kelas dengan ketinggian yang lebih tinggi.

Soalan saya: Bagaimana untuk menogol kelas ini menggunakan acara klik pada anak panah?

Answer 1

Jawapan: Gunakan class binding

Memandangkan versi Vue yang anda gunakan tidak jelas, saya menganggap anda menggunakan vue3+.

Dalam tag skrip, tambahkan Ref untuk dirujuk di bahagian templat. Memandangkan anda hanya menyemak sama ada butang telah diklik, gunakan jenis boolean.

const isActive = ref(false)

Kemudian gunakan pengikatan kelas (tambah nilai :），通过使用 JS ternary

Pada asasnya, jika isActive 为 true，它将把 active-dropdown-list 放在该元素上，否则它将是 inactive-dropdown-list