Eine kurze Analyse der Unterschiede zwischen den häufig verwendeten Anweisungen v-if und v-show von Vue

Vorwort

v-show und v-if sind häufig verwendete Vue-Anweisungen, die oft verwendet werden, um das Rendering einiger Codeblöcke zu bestimmen, aber was ist der spezifische Unterschied zwischen den beiden? ? ?

Werfen wir zunächst einen Blick auf die Einführung in die Dokumentation der chinesischen Vue-Community:

In der Dokumentation der chinesischen Vue-Community heißt es lediglich: „Die bedingte Beurteilung wird während des ersten Renderns durchgeführt.

1. V-Show

Die Funktion der v-show-Anweisung besteht darin, den Anzeigestatus des Elements entsprechend dem wahren oder falschen Wert umzuschalten. Es reagiert

Syntaxausdruck v-show = "Ausdruck"

Das Prinzip besteht darin, die CSS-Eigenschaft (Anzeige) des Elements zu ändern, um zu entscheiden, ob es angezeigt oder ausgeblendet werden soll.

Der Inhalt nach der Anweisung wird schließlich als Boolescher Wert analysiert

Wenn der Wert „true“ ist, wird das Element angezeigt, wenn der Wert „false“ ist, wird das Element ausgeblendet.

Nach der Datenänderung wird auch der Anzeigestatus der entsprechenden Elemente synchron aktualisiert

<Text>
		<div id="app">
			<input type="button" value="Anzeige umschalten" @click="changeIsShow" />
			<p v-show="isShow">Ich tue nicht mehr so, als ob ich etwas vortäusche. Ich sage dir die Wahrheit. Ja, ich bin derjenige, den du suchst</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<Skript>
			var app = new Vue({
				el:"#app",
				Daten:{
					isShow:false
				},
				Methoden:{
					changeIsShow(){
						dies.istShow = !dies.istShow
					}
					
				}
			})
		</Skript>
	</body>

2. v-wenn

Die Funktion der v-if-Anweisung: Schalten Sie den Anzeigestatus des Elements entsprechend der Wahrheit oder Falschheit des Ausdrucks um

v-if = "Ausdruck"

Das Wesentliche besteht darin, die Anzeige durch Manipulation von DOM-Elementen umzuschalten

Wenn der Wert des Ausdrucks wahr ist, existiert das Element im DOM-Baum, und wenn er falsch ist, wird es aus dem DOM-Baum entfernt.

<Text>
		<div id="app">
			<input type="button" value="Klicken Sie hier, um die Anzeige zu ändern" @click="changeIsShow" />
			<p v-if="isShow">Ich tue nicht mehr so, als ob ich es täte. Ich sage dir die Wahrheit. Ja, ich bin derjenige, den du suchst</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<Skript>
			var app = new Vue({
				el:"#app",
				Daten:{
					isShow:false
				},
				Methoden:{
					changeIsShow(){
						dies.istShow = !dies.istShow
					}
				}
			})
		</Skript>
	</body>

3. Der Unterschied zwischen v-show und v-if

1. Prinzipielle Unterschiede

• v-show-Direktive: Das Element wird immer in HTML gerendert. Es ist nur ein einfaches Pseudoelement, das das CSS-Stilattribut festlegt. Wenn das Element, das die Bedingungen nicht erfüllt, auf style="display:none" eingestellt ist, wird dies durch Ändern des CSS-Attributs (Anzeige) des Elements bestimmt, ob es angezeigt oder ausgeblendet werden soll.
• v-if-Direktive: Wenn die Bedingungen erfüllt sind, wird es in HTML gerendert, wenn die Bedingungen nicht erfüllt sind, wird es nicht in HTML gerendert und die Anzeige wird durch Manipulation von DOM-Elementen umgeschaltet

2. Unterschiede in den Nutzungsszenarien

• v-if muss DOM-Elemente betreiben, was höhere Umschaltkosten verursacht.
• v-show ändert lediglich die CSS-Eigenschaften des Elements und verursacht höhere anfängliche Rendering-Kosten.
• Wenn Sie sehr häufig wechseln müssen, empfiehlt sich die Verwendung von v-show. Wenn sich die Bedingungen während der Laufzeit selten ändern, ist die Verwendung von v-if besser.

Zusammenfassen

Dies ist das Ende dieses Artikels über den Unterschied zwischen den häufig verwendeten Vue-Anweisungen v-if und v-show. Weitere Informationen zum Unterschied zwischen den Vue-Anweisungen v-if und v-show finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!