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

以下もご興味があるかもしれません: