Vueはアコーディオン効果を実装する
|
この記事の例では、アコーディオン効果を実現するための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 属性を正しく使用するためのヒント
推薦する
MySQL (InnoDB) がデッドロックを処理する方法の詳細な説明
1. デッドロックとは何ですか?正式な定義は次のとおりです: 2 つのトランザクションが相手側で必要...
純粋な CSS でフォーム検証を実装するためのサンプル コード
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...
Angularデータバインディングとその実装の詳細な説明
目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...
DockerにRocketMQをインストールするための実装手順
目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...
モバイルウェブページのサイズ調整を実装する方法
ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...
Vue3 ページ、メニュー、ルートの使用
目次1. メニューをクリックしてジャンプ1. ページ名の統一2. 管理ページを追加3. ルートを追加...
vue+canvasでタイムラインを描く方法
この記事では、参考までにvueキャンバスのタイムライン描画の具体的なコードを紹介します。具体的な内容...
TypeScript でオブジェクト キーの値の範囲を制限する方法
TypeScript を使用する場合、TypeScript が提供する型システムを使用してコードのあ...
動的な背景グラデーション効果を実現するCSS3
CSS3 を学ぶということは、新しい機能と基本的な理論に慣れることを意味します。この記事では、ケー...
MySQL での find_in_set() 関数の使用に関する詳細な説明
まず、例を見てみましょう。記事テーブルにはタイプフィールドがあり、1 見出し、2 おすすめ、3 ホッ...
MySQL でストアド プロシージャを作成し、データ テーブルに新しいフィールドを追加する方法の分析
この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...
純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード
導入：最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...
Linux rpm および yum コマンドとその使用法の詳細な説明
RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...
HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
Lua モジュールを使用して WAF を実装する Nginx の原理の分析
目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...