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 属性を正しく使用するためのヒント
推薦する
HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します
最終結果はこんな感じです、かわいいでしょう… PS: HTML と CSS の知識があればベストです...
mysql update文の実行プロセスの詳細な説明
以前、MySQL クエリ文の実行プロセスについての記事がありました。ここでは、更新文の実行プロセスを...
Vueのレスポンシブシステムの原理の詳細な説明
目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...
PostgreSQL マテリアライズドビュープロセス分析
この記事は主にPostgreSQLマテリアライズドビューのプロセス分析について紹介します。サンプルコ...
Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド
この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...
Vue2 における 12 種類のコンポーネント通信
目次1. 小道具2..同期3.vモデル4.参照5. $emit/v-on 6. $attrs/$li...
Docker を使用した Redis マスタースレーブレプリケーションの実践の詳細説明
目次1. 背景2. 操作手順3. Dockerをインストールする4. 主なサービス構成5. サービス...
Xiaomi公式サイトの登録・ログイン機能を模倣するJavaScript
目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...
Win10にnginxをインストールする方法
会社から、負荷を実装するためにnginxをベースにFordプロジェクトのWebServiceサーバー...
フォームで完全な選択または逆選択効果を実現する JavaScript
この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参...
シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)
この記事では、シンプルなカルーセル効果を実現するためのJavaScriptの具体的なコードを参考まで...
vue-pdf はオンラインファイルプレビューを実現します
この記事では、参考までに、ファイルのオンラインプレビューを実現するためのvue-pdfの具体的なコー...
Vue で Graphql インターフェースを実装する例
注意：この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...
MySQLのジョイントクエリについて詳しく説明します
目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....
Vueモバイル端末は画面上で指をスライドさせる方向を判定する
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...