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 の新しいリレーショナル データベース機能の詳細な説明

推薦する

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

Dockerでリモートアクセスを有効にする方法

DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...

MySQLデータ移行の概要

目次序文: 1. データ移行について2. 移行計画と留意点要約:序文:日常業務では、テーブル、データ...

h1、h2、h3タグを適切に使用する

Web ページを作成する過程では、<h1>、<h2>、<h3> ...

初心者向けウェブサイト構築チュートリアル: 10 日間でウェブサイトの構築方法を学ぶ

10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...

MySQL実行計画を学ぶ

目次1. 実施計画の概要2. 実行計画の実践id:選択タイプ:テーブル:タイプ:可能なキー:鍵:キー...

Win10でのMySQL5.7.17無料インストール版の基本設定チュートリアルについて(画像とテキスト付き)

データベース アプリケーションは、アプリケーション システムに不可欠な部分です。リレーショナル デー...

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

MySQL シリーズ 11 ログ

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

画像を読み込むための JavaScript キャンバス

この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...

要素動的ルーティングブレッドクラムの実装例

マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

仮想マシンに Linux rhel7.3 オペレーティング システムをインストールする (具体的な手順)

仮想化ソフトウェアをインストールする仮想マシンにオペレーティング システムをインストールする前に、ホ...