Vue: 드롭다운 메뉴 전환 및 다른 요소의 클래스를 전환하는 방법

Question

이것을 얻었습니다(매우 간단함):

으아아아

전환과 함께 열리는 드롭다운 메뉴를 작성하고 싶습니다. 따라서 높이는 1초 전환에 0에서 100픽셀로 변경됩니다.

그래서 dropdownList수업을 바꾸는 것도 좋은 방법인 것 같아요. 내가 맞나요? 먼저 높이가 0인 클래스를 가져오고 화살표를 클릭한 후 높이가 더 높은 클래스를 가져옵니다.

내 질문: 화살표의 클릭 이벤트를 사용하여 이 클래스를 전환하는 방법은 무엇입니까?

Answer 1

답변: 클래스 바인딩을 사용하세요

어떤 Vue 버전을 사용하고 있는지 확실하지 않으므로 vue3+를 사용하고 있다고 가정합니다.

스크립트 태그에 Ref를 추가해 템플릿 섹션에서 참조하세요. 버튼이 클릭되었는지만 확인하므로 부울 유형을 사용합니다.

으아아아

그런 다음 클래스 바인딩을 사용합니다(클래스 속성 앞에 :），通过使用 JS 삼항

으아아아

기본적으로 만약 isActive 为 true，它将把 active-dropdown-list 放在该元素上，否则它将是 inactive-dropdown-list