序文条件付きレンダリングとは何ですか?私たちのページには、このような応用シナリオがたくさんあります。たとえば、今日イベントを開催する場合、このイベント ページは今日のみ有効です。夜の 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 属性の使用の概要
Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...
序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...
目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...
この記事の例では、商品詳細ページ機能を実現するためのVueの商品タブの具体的なコードを参考までに共有...
<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...
今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...
React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...
コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...
感想:私はバックエンド開発者です。静的 (HTML) ページを取得すると、ページ構造と命名規則が極端...
目次序文パブリッシュ・サブスクライバ・パターン結果電話要約する序文双方向データ バインディングとは、...
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...
まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...
問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...
Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...