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 属性を正しく使用するためのヒント
推薦する
Mac 環境での Nginx 構成とローカル静的リソースへのアクセスの実装
ローカル開発では、直接アクセスできない静的ファイル リソースのデバッグが必要になる場合があります。こ...
docker エントリポイントファイルの詳細な説明
Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...
MYSQL の 10 の典型的な最適化ケースとシナリオ
目次1. SQL最適化の一般的な手順1. SQL実行計画の分析を説明する2. プロフィール分析を表示...
CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル
1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...
Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法
下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...
Vue のスロットの使用法と適用シナリオの詳細な分析
スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...
JSはUUIDとNanoIDというユニークなIDメソッドを生成します
目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文：ユ...
ウェブページの画像最適化ツールと使用方法のヒントの共有
ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...
Div CSS 命名標準 CSS クラスの命名規則 (SEO 標準に準拠)
検索エンジン最適化 (SEO) では実行すべきタスクが多数ありますが、その中でもコードの最適化は重要...
Linuxサーバーのファイアウォールを変更してポートへのリモートアクセスを許可する方法
1. 問題の説明セキュリティ上の理由から、新しく構築されたサーバー クラスターでは、指定されたポート...
JavaScript配列の組み込みメソッドの詳細な説明
目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...
Ubuntu 18.04 システムでの Redis および phpredis 拡張機能のインストールと設定の詳細な説明
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
MySQL パフォーマンス最適化のヒント
MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...
Zabbix による SQL Server の監視プロセスの詳細な説明
Zabbix による SQL Server の監視を見てみましょう。まずfreetdsをダウンロード...