私はこれを理解しました(非常に単純です):
トランジションで開くドロップダウン メニューを作成したいと考えています。したがって、高さは 1 秒間の遷移で 0 から 100 ピクセルまで変化します。
なので、dropdownList のクラスを切り替えるのが良い方法だと思います。私は正しいですか？最初に高さ 0 のクラスを取得し、矢印をクリックすると、より高い高さのクラスを取得します。
dropdownList
私の質問: 矢印のクリックイベントを使用してこのクラスを切り替えるにはどうすればよいですか?
使用している Vue のバージョンが不明なため、vue3 を使用していると思われます。
script タグに、テンプレート セクションで参照される Ref を追加します。ボタンがクリックされたかどうかを確認するだけなので、ブール型を使用します。
次に、isActive# の値に基づいて :JS ternary リーリー
isActive# の値に基づいて :JS ternary
isActive が true の場合、その要素に active-dropdown-list が配置され、それ以外の場合は inactive-dropdown-list# になります。 ##
が true の場合、その要素に
が配置され、それ以外の場合は
# になります。 ##
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
答え: クラスバインディングを使用します
使用している Vue のバージョンが不明なため、vue3 を使用していると思われます。
script タグに、テンプレート セクションで参照される Ref を追加します。ボタンがクリックされたかどうかを確認するだけなので、ブール型を使用します。
リーリー次に、
基本的に、isActive# の値に基づいて :JS ternaryリーリーisActive
が true の場合、その要素にactive-dropdown-listが配置され、それ以外の場合はinactive-dropdown-list# になります。 ##