Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング

Vue 基本チュートリアル: 条件付きレンダリングとリストレンダリング

序文

条件付きレンダリングとは何ですか?私たちのページには、このような応用シナリオがたくさんあります。たとえば、今日イベントを開催する場合、このイベント ページは今日のみ有効です。夜の 24:00 または明日の午前 0:01 には、このページを削除し、写真を非表示にする必要があります。運用保守担当者に HTML を手動で変更するよう依頼すると、気が狂ってしまいます。実は、ここでは条件付きレンダリングという非常に簡単な方法があります。つまり、0 時に条件を判断します。条件が 24 時や 0 時などの時点に達した場合は非表示にします。これが条件付きレンダリングです。

リストレンダリングとは何ですか?これは最も一般的なものです。たとえば、ページに多くの要素と画像があり、ニュース Web サイトが一度に 20 件の記事を読み込む場合、HTML を手動で記述すると、ニュース Web サイトのスタッフは作業​​する必要がなくなり、毎日 HTML コードを入力するだけで済みます。ここには、C 言語コードの for ループに似たループ ステートメントがあり、このページの要素を構築して生成できます。これがリスト レンダリングです。 1 v-if と v-show

1.1 機能

どちらも要素の表示と非表示を制御するために使用されます

1.2 要素の可視性を制御する方法

v-if は、仮想 DOM ツリー上の要素の作成と破棄を制御します。Vue の応答システムは、仮想 DOM ツリーに基づいて実際の DOM を更新し、それによって実際の DOM 上の要素の可視性を間接的に制御します。

v-showは要素にスタイルdisplay:noneを追加して要素を非表示にします。

1.3 初期レンダリングの比較

v-if は遅延です。初期のレンダリング条件が false の場合、何も行われません。条件が true の場合にのみコンパイルが開始されます。

v-show 初期のレンダリング条件に関係なく、要素は常にコンパイルされて保持され、その後条件に基づいてCSSによって切り替えられます。

1.4 スイッチング消費の比較

表示と非表示を頻繁に切り替える場合、v-if は要素を頻繁に作成および破棄しますが、v-show はスタイルのみを切​​り替えます。

したがって、v-ifのスイッチングコストは高くなります。

1.5 使用シナリオの比較

要素の表示と非表示が最初に決定され、変更されない場合は、v-ifを使用します。

要素を頻繁に切り替える必要がある場合は、v-showを使用します。

1.6 その他

  • v-ifはテンプレートで使用できますが、v-showは使用できません。
  • v-ifはv-elseと一緒に使用できますが、v-showには特別な構文はありません。

2 v-if と v-for

2.1 v-if と v-for を同時に使用できない理由

同じ要素で v-if と v-for を同時に使用できないのはなぜですか?

Vue が命令を処理するとき、v-for は v-if よりも優先度が高いため、このテンプレートは次のようになります。

<ul>
  <li v-for="リスト内のアイテム" v-if="item.isActive" :key="item.id">
    {{item.name}}
  </li>
</ul>

以下の操作が実行されます。

this.list.map(関数(項目) {
  アイテムがアクティブの場合
    アイテム名を返す
  }
})

isActive が true に設定されている項目が少数であっても、再レンダリングするたびにリスト全体を走査する必要があり、パフォーマンスが大幅に低下するため、両方を同じ要素で同時に使用することはできません。

2.2 v-ifとv-forを併用する解決策

1. リスト全体の可視性を制御する場合は、v-if をコンテナ要素に移動します。例:

<本文>
  <div id="例">
    <ul v-if="リスト表示">
      <li v-for="アクティブアイテム内のアイテム" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</本文>
<スクリプト>
  定数vm = 新しいVue({
    el: "#例",
    データ: {
      リスト: [
        { id: 1、名前: "ルフィ"、isActive: true }、
        { id: 2、名前: "サウロン"、isActive: false }、
        { id: 3、名前: "サンジ"、isActive: true }、
      ]、
      リスト表示: false、
    }
  });
</スクリプト>

2. リスト内の項目をフィルタリングする場合は、計算プロパティを使用してフィルタリングされたリストを返すことができます。次に例を示します。

<本文>
  <div id="例">
    <ul>
      <li v-for="アクティブアイテム内のアイテム" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</本文>
<スクリプト>
  定数vm = 新しいVue({
    el: "#例",
    データ: {
      リスト: [
        { id: 1、名前: "ルフィ"、isActive: true }、
        { id: 2、名前: "サウロン"、isActive: false }、
        { id: 3、名前: "サンジ"、isActive: true }、
      ]、
    },
    計算: {
      アクティブアイテム: 関数 () {
        this.list.filter((item) => item.isActive); を返します。
      },
    },
  });
</スクリプト>

3 リストレンダリングキーの用途は何ですか

リストのレンダリングにv-forを使用する場合、要素にキー属性を追加する必要があります。このキーは一意の識別子である必要があります。

<ul>
 <li v-for="リスト内のアイテム" :key="item.id">{{item.name}}</li>
</ul>

Vue が要素を更新するとき、実際の DOM を直接操作するのではなく (実際の DOM のレンダリングは非常にコストがかかります)、新しいデータに基づいて新しい仮想 DOM を生成し、新しい仮想 DOM と古い仮想 DOM を比較し、比較結果に基づいて DOM 操作を実行してビューを更新することがわかっています。

リストをレンダリングするときに、キー属性がある場合、それは一意の識別子であるため、キーが異なる場合に 2 つの新しいノードと古いノードを比較するときに詳細な比較を実行する必要はありません。

なぜインデックスをキーとして使用できないのですか?インデックスは不安定かつ変更可能であるため、たとえば、リストの最初の要素を削除すると、後続の要素のインデックスが変更され、キーが変更されます。このとき、Vue は新旧のノードを比較する際に、同じキーを持つノードに遭遇すると、詳細な比較を実行します。ノードの内容が変更されたことがわかった場合は、新しい実 DOM を作成して、元の実 DOM を置き換えます。本来は実際の DOM の最初の要素を削除するだけだった操作が、後続のすべての実際の DOM を作成して置き換えることになり、パフォーマンスが大幅に浪費されることになります。

要約する

これで、Vue 基本チュートリアル - 条件付きレンダリングとリスト レンダリングに関するこの記事は終了です。Vue 条件付きレンダリングとリスト レンダリングに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の条件付きレンダリングとリストレンダリングの詳細な理解
  • Vue.js の条件付きレンダリング命令の簡単な分析
  • Vue 条件付きレンダリング v-if と v-show
  • Vueのリストレンダリングの詳細な説明
  • vue の v-for ディレクティブはリストのレンダリングを完了します
  • Vue リストのレンダリング、並べ替え、フィルタリングの詳細な説明
  • Vue 条件付きレンダリングとリストレンダリング

<<:  メタタグにおける http-equiv 属性の使用の概要

>>:  MySQLクエリが遅い理由

推薦する

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

Vue3 コンポジション API の紹介

目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

Python 仮想環境のインストールとアンインストールの方法と発生する問題

Ubuntu16.04 のインストールとアンインストール pip実験環境Ubuntu 16.04; ...

複数の画像を切り替えるJavaScript

この記事では、複数の画像を切り替えるJavaScriptの具体的なコードを参考までに紹介します。具体...

MySQL ストアド プロシージャの概念、原則、一般的な使用法の詳細な説明

この記事では、例を使用して、MySQL ストアド プロシージャの概念、原則、および一般的な使用法につ...

Mysql WorkBench のインストールと設定のグラフィックチュートリアル

この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...

HTML ボディタグと HTML でよく使われる制御タグの詳細な説明

1. <body> タグ: Web ページの本体をマークするために使用されます。body...

SeataがMySQL 8バージョンを使用できない問題を解決する方法

考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...

Nacos で MySQL8 を設定する方法

1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...

HTML テーブル境界制御実装コード

一般的に、テーブルを使用する場合は、常に <table border="1"...

iframe src 割り当ての問題 (サーバー側)

今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...

VUEトークンの無効化プロセスの詳細な説明

目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...

Reactコンポーネントのライフサイクルの詳細な説明

目次1.ライフサイクルとは何か2. 読み込みプロセス1.コンストラクタ2. レンダリング3. コンポ...