Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します
2. データレンダリングの原則: 主に v-for によってバインドされたインデックスを使用して制御します。これは上記と同様です。 2. コンポーネントの切り替え。
3. ルート切り替え。 (アドレスバーとデータリクエストに優しい)
Vue タブスイッチはデータの状態を保持しますページ上のタブを切り替える場合、切り替えるたびにコンポーネントが再インスタンス化されるため、ページがどのように切り替えられてもタブ内のコンテンツが変更されないようにし、ページの再レンダリングとリクエストを削減する必要があります。 実装方法: <keep-alive></keep-alive> を使用してコンポーネントをラップします。 <el-tabs v-model="アクティブ名" @tab-click="ハンドルクリック"> <el-tab-pane label="記録"> <キープアライブ> <child1 v-if="isChildUpdate"></child1> </キープアライブ> </el-tab-pane> </el-tabs> リストページの詳細にジャンプし、リストページに最後の操作ステータスを保持します これは、ルーター ビューをロードし、ルーティング メタ ページをキャッシュに設定することによって実現されます。 ルータビューが複数のレイヤーにネストされている場合は、複数のレイヤーを設定し、beforeRouteLeaveを使用してルートの退出を監視し、キャッシュするかどうかを設定する必要がある場合があります。 // 他のページからジャンプする場合、ページのキャッシュは必要ありません。詳細ページから戻る場合はキャッシュが必要です。 要約する以上で、Vue でタブ切り替えを実装する 3 つの方法と、切り替え中にデータの状態を維持する方法についての説明は終了です。Vue のタブ切り替え方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Bash スクリプトを使用して Linux のメモリ使用量を監視する方法
>>: MySQL 8.0 の新しいリレーショナル データベース機能の詳細な説明
フレーム構造タグ <frameset></frameset>フレームを使用す...
MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...
目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...
1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...
Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...
目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...
3. MySQLデータ管理最初の方法:お勧めできません。複雑そうです -- 学生テーブルの grad...
目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...
目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...
目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...
少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...
目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...
目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...
序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...
Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...