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コマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法
目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...
MycliはMySQLコマンドライン愛好家にとって必須のツールです
マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...
ul リスト タグ デザイン ウェブ ページ 複数列レイアウト
数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアは...
union (all) と limit および exists キーワードの使用法を理解するための MySQL シリーズチュートリアル
目次1.union: クエリ結果を追加できます1) すべてを結合: 重複を削除できません2) ユニオ...
GoogleとFacebookがDockerを使わない理由
この記事を書いた理由は、修正した分散 PyTorch プログラムを Facebook のクラスター上...
フォーム要素とプロンプトテキストが揃っていない問題
最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...
JavaScript の手ぶれ補正とスロットリングの詳細な説明
目次デバウンススロットル要約するデバウンス定義: スクロール イベントなど、短時間に連続してトリガー...
MySQLトランザクションとSpring分離レベルの実装原理の詳細な説明
1. トランザクションはACID特性を持つ原子性: トランザクションは、トランザクションによって分割...
MySQLクエリプランでken_lenの値を計算する方法
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
エージェントを介したzabbix監視プロセスとポートの詳細なプロセス
環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...
React Nativeでaxiosを使用してネットワークリクエストを行う方法
フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...
CSS で高さが不明な垂直中央揃えを実装する
この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...
Nginx の負荷分散方法の概要
負荷分散を理解するには、まずフォワード プロキシとリバース プロキシを理解する必要があります。注記：...
docker inspect コマンドの使用に関するヒント
説明と紹介Docker inspect は Docker クライアントのネイティブ コマンドであり、...
SSHを使用してDockerサーバーに接続する方法
初めて docker に触れたときは本当に戸惑いました。初心者向けのチュートリアルを長い間読みました...