Vue：ドロップダウンメニューの遷移と別要素のクラスを切り替える方法

Question

私はこれを理解しました(非常に単純です):

リーリー

トランジションで開くドロップダウン メニューを作成したいと考えています。したがって、高さは 1 秒間の遷移で 0 から 100 ピクセルまで変化します。

なので、dropdownList のクラスを切り替えるのが良い方法だと思います。私は正しいですか？最初に高さ 0 のクラスを取得し、矢印をクリックすると、より高い高さのクラスを取得します。

私の質問: 矢印のクリックイベントを使用してこのクラスを切り替えるにはどうすればよいですか?

Answer 1

答え: クラスバインディングを使用します

使用している Vue のバージョンが不明なため、vue3 を使用していると思われます。

script タグに、テンプレート セクションで参照される Ref を追加します。ボタンがクリックされたかどうかを確認するだけなので、ブール型を使用します。

リーリー

次に、isActive# の値に基づいて :JS ternary リーリー

基本的に、

isActive が true の場合、その要素に active-dropdown-list が配置され、それ以外の場合は inactive-dropdown-list# になります。 ##