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 WorkBench のインストールと設定のグラフィックチュートリアル
この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...
Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介
1. フィルター例： <!DOCTYPE html> <html lang=&qu...
AIX マウント NFS の書き込み効率が低い場合の解決策
NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...
mysql5.7 以降で my.ini を設定するための詳細な手順
Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリ、my-...
in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明
in() の ID の順序に従った Mysql クエリ結果の順序の詳細な説明コード例: <se...
MySQL 5.7.17 zip パッケージ バージョンを Windows 10 にインストールするチュートリアル
mysql5.7.17のインストールチュートリアルを参考までに共有します。具体的な内容は次のとおりで...
MySQL のインデックスとデータ テーブルを管理する方法
目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...
MySQL で遅いファジークエリを最適化する方法
目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...
vue3.2 で追加された defineCustomElement の基本原理の詳細な説明
目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...
Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策
Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...
MySQL 文字列分割の例 (区切り文字なしの文字列抽出)
区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...
border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード
開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...
JavaScript 文字列操作の 4 つの実用的なヒント
目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....
Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法
HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...
Linux ブートシステム方式の分析
この記事では、Linux システムを起動する方法について説明します。ご参考までに、詳細は以下の通りで...