Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法

1. v-showはコンテンツの切り替えを制御します

1. シンプル バージョンの原則: クリック イベントを使用して、タブ スタイルとコンテンツの表示と非表示を制御するスイッチとして数値を変更します。

クリックしてVueタブを切り替えます

2. データレンダリングの原則: 主に v-for によってバインドされたインデックスを使用して制御します。これは上記と同様です。

タブ用

2. コンポーネントの切り替え。

1.主な知識ポイントは、is in vueとキープアライブキャッシュの特性です。

Vueコンポーネントの切り替え

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue-router と v-if を使用してタブ切り替えを実装する際の問題と解決策
  • Vueはタブルーティング切り替えコンポーネントのメソッド例を実装します
  • Vueを使用してタブ切り替え操作を実装する詳細な説明
  • VUE でタブページを切り替える 4 つの方法
  • Vueルーターでタブを切り替える方法

<<:  Bash スクリプトを使用して Linux のメモリ使用量を監視する方法

>>:  MySQL 8.0 の新しいリレーショナル データベース機能の詳細な説明

推薦する

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...

MySQL 8の新機能ROLEの詳しい説明

MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...

要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...

CentOS IP接続ネットワーク実装プロセス図

1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...

ログインフォームを実装するためのReactサンプルコード

Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

MySQLデータベースでの値の追加、変更、削除、クリアの例

3. MySQLデータ管理最初の方法:お勧めできません。複雑そうです -- 学生テーブルの grad...

ZooKeeper をベースにした Hadoop 高可用性クラスタの構築のチュートリアル図

目次1. 高可用性の概要1.1 可用性の高い全体アーキテクチャ1.2 QJMに基づく共有ストレージシ...

MySQL binlog を使用して誤って削除されたデータベースを復元する方法

目次1 現在のデータベースの内容を表示し、データベースをバックアップする2 bin_log関数を有効...

MySQL InnoDB ストレージエンジンのメモリ管理の詳細な説明

目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...

Tik Tok サブスクリプション ボタンのアニメーション効果を実現する CSS

少し前にTik Tokを見ていて、フォローするときのボタンアニメーションがとても美しいと思ったのと、...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

nginx が動的と静的の分離を実装する方法の例

目次server1にnginxをデプロイするサーバーにlnmpを展開するノード3にhttpdをデプロ...

Angularフレームワークのビュー抽象定義の詳細な説明

序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである A...

Linux で unzip コマンドを使用して複数のファイルを解凍する方法

Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...