この記事の例では、アコーディオン効果を実現するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 マウスイン/アウトイベントを使用してコンテンツを非表示にする 使用される知識ポイント: 1.@mouseover マウス移動イベント 2.@mouseout マウスアウトイベント 3. v-if 条件付きレンダリング <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <!-- シンプルなスタイル設定 --> <スタイル タイプ="text/css"> * { マージン: 0; パディング: 0; } ul { リストスタイル: なし; } 。タイトル{ 幅: 90ピクセル; 高さ: 40px; 行の高さ: 40px; テキスト配置: 中央; 背景色: #AFAFAF; } 。アクティブ{ 背景色: #000000; 色: 白; } </スタイル> </head> <本文> <div id="ボックス"> <ul class="ul"> <!-- マウスインおよびマウスアウトイベント--> <li @mouseover="num=1" @mouseout="num=0" class="title">タイトル 1</li> <!-- 条件付きレンダリング --> <li v-if="num==1">h1h1h1h1</li> <li v-if="num==1">h1h1h1h1</li> <li v-if="num==1">h1h1h1h1</li> <li v-if="num==1">h1h1h1h1</li> </ul> <ul class="ul"> <li @mouseover="num=2" @mouseout="num=0" class="title">タイトル 2</li> <li v-if="num==2">h2h2h2h2</li> <li v-if="num==2">h2h2h2h2</li> <li v-if="num==2">h2h2h2h2</li> <li v-if="num==2">h2h2h2h2</li> </ul> <ul> <li @mouseover="num=3" @mouseout="num=0" class="title">タイトル 3</li> <li v-if="num==3">h3h3h3hh3</li> <li v-if="num==3">h3h3h3hh3</li> <li v-if="num==3">h3h3h3hh3</li> <li v-if="num==3">h3h3h3hh3</li> </ul> </div> </本文> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = 新しい Vue({ el: "#ボックス", データ() { 戻る { 番号: 0 } } }) </スクリプト> </html> 結果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 要素を中央に配置するための配置方法 (Web ページ レイアウトのヒント)
>>: HTML の title 属性を正しく使用するためのヒント
ローカル開発では、直接アクセスできない静的ファイル リソースのデバッグが必要になる場合があります。こ...
Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...
目次1. SQL最適化の一般的な手順1. SQL実行計画の分析を説明する2. プロフィール分析を表示...
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...
下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...
スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...
目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文:ユ...
ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...
検索エンジン最適化 (SEO) では実行すべきタスクが多数ありますが、その中でもコードの最適化は重要...
1. 問題の説明セキュリティ上の理由から、新しく構築されたサーバー クラスターでは、指定されたポート...
目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
Zabbix による SQL Server の監視を見てみましょう。まずfreetdsをダウンロード...