序文条件付きレンダリングとは何ですか?私たちのページには、このような応用シナリオがたくさんあります。たとえば、今日イベントを開催する場合、このイベント ページは今日のみ有効です。夜の 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 その他
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: メタタグにおける http-equiv 属性の使用の概要
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...
目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
Ubuntu16.04 のインストールとアンインストール pip実験環境Ubuntu 16.04; ...
この記事では、複数の画像を切り替えるJavaScriptの具体的なコードを参考までに紹介します。具体...
この記事では、例を使用して、MySQL ストアド プロシージャの概念、原則、および一般的な使用法につ...
この記事では、Mysql WorkBenchのインストールと設定のグラフィックチュートリアルを参考ま...
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...
1. <body> タグ: Web ページの本体をマークするために使用されます。body...
考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...
1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...
一般的に、テーブルを使用する場合は、常に <table border="1"...
今日この問題に遭遇しました。サーバー側でiframeのsrc値を再割り当てし、iframeにIDを追...
目次ターゲット思考分析コード着陸要約するターゲットトークンの有効期限切れシナリオの処理トークンは、ユ...
目次1.ライフサイクルとは何か2. 読み込みプロセス1.コンストラクタ2. レンダリング3. コンポ...