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 属性を正しく使用するためのヒント
推薦する
preタグを自動的に折り返すためのサンプルコード
pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...
MySQL 5.6.36 Windows x64 バージョンのインストールチュートリアルの詳細
1. 対象環境Windows 7 64ビット2. 材料（1）VC++2010リリースパッケージ（64...
MySQL 上級学習インデックスの長所と短所、使用ルール
1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...
IE8ブラウザはWebページ標準に完全互換となる
<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...
CSS3 カウントダウン効果
成果を達成する実装コードhtml <div クラス = 'ラッパー'> ...
HTML 背景画像と背景色_PowerNode Java アカデミー
1. HTML 画像 <img> 1. <img> タグとその src 属性...
Vue 3 で Vue Router リンクを拡張する方法
序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...
MySQL 5.7 のルートパスワードログイン問題の解決策
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...
Ubuntuデュアルシステムが起動時に停止する問題の解決方法の詳細な説明
起動時に Ubuntu デュアル システムが停止する問題の解決方法 (Ubuntu 16.04 およ...
CSS で 2 列レイアウトを実現する N 通りの方法
1. 2 列レイアウトとは何ですか? 2 列レイアウトには、左側が固定幅で右側が適応幅のレイアウトと...
JavaScriptページングコンポーネントの使い方の詳細な説明
ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...
Linux での Python のアップグレードと pip のインストールの詳細な説明
Linuxバージョンのアップグレード: 1. まず、Linuxオペレーティングシステムに付属するPy...
iframeを透明にするパラメータ
<iframe src="./ads_top_tian.html" all...
Dockerでnginxを実行し、ローカルディレクトリをイメージにマウントする方法
1 hupからイメージを取得する docker プル nginx 2 マウントするディレクトリを作成...
VMware12.0 インストール Ubuntu14.04 LTS チュートリアル
私は、デスクトップ バージョンとサーバー バージョンの両方で、仮想マシンにさまざまなイメージを何度も...