Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

序文

v-show と v-if は、一般的に使用される Vue 命令であり、一部のコード ブロックのレンダリングを決定するためによく使用されますが、この 2 つの具体的な違いは何でしょうか。 ? ?

まず、Vue 中国語コミュニティ ドキュメントの紹介を見てみましょう。

Vue 中国語コミュニティのドキュメントには、次のように簡潔に記載されています。「条件判断は初期レンダリング中に実行されます。」

1. Vショー

v-show命令の機能は、真偽値に応じて要素の表示状態を切り替えることです。

構文式 v-show = "式"

原則としては、要素の CSS プロパティ (display) を変更して、要素を表示するか非表示にするかを決定します。

命令の後のコンテンツは最終的にブール値として解析されます

値が true の場合、要素は表示され、値が false の場合、要素は非表示になります。

データが変更されると、対応する要素の表示ステータスも同期して更新されます。

<本文>
		<div id="アプリ">
			<input type="button" value="表示を切り替える" @click="changeIsShow" />
			<p v-show="isShow">もう偽りはしません。本当のことを言っています。そう、私はあなたが探している人です</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<スクリプト>
			var アプリ = 新しい Vue({
				el:"#アプリ",
				データ：{
					isShow:false
				},
				方法:{
					表示を変更する(){
						this.isShow = !this.isShow
					}
					
				}
			})
		</スクリプト>
	</本文>

2. 動詞-if

v-if命令の機能：式の真偽に応じて要素の表示状態を切り替える

v-if = "式"

本質はDOM要素を操作して表示を切り替えることです

式の値が true の場合、要素は DOM ツリー内に存在し、false の場合、要素は DOM ツリーから削除されます。

<本文>
		<div id="アプリ">
			<input type="button" value="クリックして表示を切り替える" @click="changeIsShow" />
			<p v-if="isShow">もう偽りはしません。本当のことを言っています。そう、私はあなたが探している人です</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<スクリプト>
			var アプリ = 新しい Vue({
				el:"#アプリ",
				データ：{
					isShow:false
				},
				方法:{
					表示を変更する(){
						this.isShow = !this.isShow
					}
				}
			})
		</スクリプト>
	</本文>

3. v-showとv-ifの違い

1. 原則的な違い

• v-show ディレクティブ: 要素は常に HTML にレンダリングされます。これは、CSS スタイル属性を設定する単純な疑似要素です。条件を満たさない要素が style="display:none" に設定されている場合は、要素の CSS 属性 (display) を変更して表示または非表示を決定します。
• v-ifディレクティブ：条件が満たされればHTMLにレンダリングされ、条件が満たされなければHTMLにレンダリングされず、DOM要素を操作して表示が切り替わる

2. 使用シナリオの違い

• v-if は DOM 要素を操作する必要があり、切り替えコストが高くなります。
• v-show は要素の CSS プロパティを変更するだけなので、初期のレンダリング コストが高くなります。
• 非常に頻繁に切り替える必要がある場合は、v-show を使用することをお勧めします。実行時に条件がほとんど変化しない場合は、v-if を使用することをお勧めします。

要約する

よく使われるVue命令v-ifとv-showの違いについての記事はこれで終わりです。Vue命令v-ifとv-showの違いについてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。