vuejs の v-show と v-if の違いは何ですか-Vue.js-php.cn

vuejs の v-show と v-if の違いは何ですか

青灯夜游

リリース： 2023-01-13 00:45:46

オリジナル

5167 人が閲覧しました

違い: 1. 「v-if」は DOM 要素を DOM ツリーに動的に追加または削除し、「v-show」は DOM 要素の表示スタイル属性を設定することで表示と非表示を制御します。 2. コンパイル処理が異なる; 3. コンパイル条件が異なる; 4. 「v-if」のスイッチングコストが高い、「v-show」の初期レンダリングコストが高い、など

vuejs の v-show と v-if の違いは何ですか

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

v-if と v-show の違い

v-if コマンドと v-show コマンドは、値に基づいて DOM 要素の表示と非表示を動的に制御します。v-if と v-show は、## の内部命令でよく使用されます。 #Vue.式の値が変更されたときに、特定の特別な動作を DOM に適用する必要があります。

#説明

v-if

コマンドコンテンツの一部を条件付きでレンダリングするために使用されます。このコンテンツは、ディレクティブの式が truthy 値を返した場合にのみレンダリングされます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div v-if="show">show</div> <div v-else>hide</div></pre><div class="contentsignin">ログイン後にコピー</div></div>

v-show

コマンドの使用法は、v- が含まれていることを除いて、ほぼ同じです。 show ディレクティブの要素は常にレンダリングされ、DOM に残ります。v-show は単に要素の CSS プロパティの表示 を切り替えるだけです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div v-show="show">show</div></pre><div class="contentsignin">ログイン後にコピー</div></div>

違い

v-if
は に対して動的ですDOM ツリー内の DOM 要素を追加または削除します。 v-show は、DOM## の display スタイル属性を設定することによって制御されます。 # 要素表示と非表示。
コンパイルプロセス:
切り替えには、部分的なコンパイルとアンインストールのプロセスがあり、切り替えプロセス中に、内部イベントリスナーとサブコンポーネントが適切に破棄されます。
v-show は CSS に基づいた単純なスイッチです。
コンパイル条件:
は遅延です。初期条件が false の場合は、何も行いません。条件が初めて true になった場合のみです。部分的な場合のみです。コンパイルが開始され、
v-show は任意の条件下でコンパイルされてキャッシュされ、DOM 要素は保持されます。
パフォーマンスの消費:
はスイッチングコストが高く、
v-show は初期レンダリングコストが高くなります。
使用シナリオ:
は、条件が変化する可能性が低い状況に適しており、
v-show は、条件が変化する可能性が低い状況に適しています。頻繁に切り替わります。
関連する推奨事項:「

」

以上がvuejs の v-show と v-if の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。