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クエリが遅い理由

推薦する

Tomcatの再構成後に起動が遅くなる問題を迅速に解決

Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

node.js で EventEmitter をカスタマイズする方法

目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...

Vueは商品詳細ページの商品タブ機能を実装します

この記事の例では、商品詳細ページ機能を実現するためのVueの商品タブの具体的なコードを参考までに共有...

HTML ベースタグ target=_parent の使用の紹介

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...

HTML+CSS でハートビートの特殊効果を作成する

今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

HTML初心者や初級者向けの提案。専門家は無視してかまいません。

感想:私はバックエンド開発者です。静的 (HTML) ページを取得すると、ページ構造と命名規則が極端...

jsプロジェクトでの双方向データバインディングの簡単な実装方法

目次序文パブリッシュ・サブスクライバ・パターン結果電話要約する序文双方向データ バインディングとは、...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...

MySql8.023 インストール プロセスの詳細なグラフィック説明 (初回インストール)

まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...

JVM 上の高性能データ形式ライブラリ パッケージである Apache Arrow の紹介とアーキテクチャ (Gkatziouras)

Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...