Detaillierte Erklärung der Listendarstellung von Vue

1. v-for: Array-Inhalte durchlaufen (häufig verwendet)

in kann auch durch of ersetzt werden.

<Text>
	<div id="div1">
		<li v-for='(p,i) in Personen' :key=i>
			{{p.name}}--{{p.age}}
			<!-- Zhang--18
				 Lee – 19
				 Liu--17 -->
		</li>
	</div>
</body>
<Skripttyp="text/javascript">
	Vue.config.productionTps=false
 	neuer Vue({
		el:"#div1",
		Daten:{
			Personen:
				{id:'001',name:"K",age:18},
				{id:'002',name:"Mann",age:19},
				{id:'002',name:"Liu",alter:17},
			]
		}
	})
</Skript>

2. v-for: Objekteigenschaften durchlaufen (häufig verwendet)

<Text>
	<div id="div1">
		<li v-for='(p,k) in Personen' :key=k>
			{{Pi}}
			<!-- Zhang--Name
				 18--Alter -->
		</li>
	</div>
</body>
<Skripttyp="text/javascript">
	Vue.config.productionTps=false
 	neuer Vue({
		el:"#div1",
		Daten:{
			Personen:
				Name: „Name“,
				Alter:18
			}
		}
	})

3. Durchlaufen einer Zeichenfolge (ungewöhnlich)

<Text>
	<div id="div1">
		<li v-for='(p,i) in str' :Schlüssel=i>
			{{Pi}}
			<!-- a--0 
				 b--1
				 c--2
				 d-3
				 e--4 -->
		</li>
	</div>
</body>
<Skripttyp="text/javascript">
	Vue.config.productionTps=false
 	neuer Vue({
		el:"#div1",
		Daten:{
			str:"abcde"
		}
	})
</Skript>

4. Eine bestimmte Anzahl von Durchläufen durchführen (nicht allgemein verwendet)

<Text>
	<div id="div1">
		<li v-für='(p,i) in 5' :key=i>
			{{Pi}}
			<!-- 1--0
				 2 – 1
				 3 – 2
				 4-3
				 5--4 -->
		</li>
	</div>
</body>

5. Funktion und Prinzip des Schlüssels

Der Index wird oben als Schlüssel verwendet, es treten jedoch Fehler auf, wenn das DOM in einer störenden Reihenfolge geändert wird oder wenn Eingabeinhalte vorhanden sind. Der Index kann nur dann als Schlüssel verwendet werden, wenn er zum Rendern einer Seite ohne Änderung der Seite dient.

Es wird dringend empfohlen, den eindeutigen Identifikator der Daten, wie ID, Mobiltelefonnummer, E-Mail-Adresse als Schlüssel zu verwenden

1. Die Rolle des Schlüssels im virtuellen DOM:

Schlüssel ist die Kennung des virtuellen DOM-Objekts. Wenn sich die Daten ändern, generiert Vue basierend auf den neuen Daten ein neues virtuelles DOM. Anschließend vergleicht Vue die Unterschiede zwischen dem neuen virtuellen DOM und dem alten virtuellen DOM. Die Vergleichsregeln lauten wie folgt:

2. Vergleichsregeln:

(1) Derselbe Schlüssel wie im alten virtuellen DOM ist auch im neuen virtuellen DOM zu finden:

①. Wenn sich der Inhalt im virtuellen DOM nicht geändert hat, verwenden Sie direkt den vorherigen realen DOM!

②. Wenn sich der Inhalt im virtuellen DOM ändert, wird ein neuer realer DOM generiert und anschließend der vorherige reale DOM auf der Seite ersetzt.

(2) Wenn der gleiche Schlüssel wie im neuen virtuellen DOM nicht im alten virtuellen DOM gefunden wird, wird ein neuer realer DOM erstellt und dann auf der Seite gerendert.

3. Probleme, die bei der Verwendung des Index als Schlüssel auftreten können:

1. Wenn die Daten in umgekehrter Reihenfolge hinzugefügt oder gelöscht werden und dadurch die Reihenfolge zerstört wird:

Es werden unnötige echte DOM-Updates generiert. ==> Der Schnittstelleneffekt ist in Ordnung, aber die Effizienz gering.

2. Wenn die Struktur auch DOM der Eingabeklasse enthält:

Führt zu einem falschen DOM-Update. ==> Mit der Schnittstelle stimmt etwas nicht.

4. Wie wählt man den Schlüssel während der Entwicklung aus?

1. Am besten verwenden Sie als Schlüssel die eindeutige Kennung jedes Datenelements, z. B. Ausweis, Handynummer, Personalausweisnummer, Matrikelnummer und andere eindeutige Werte.

2. Wenn keine die Reihenfolge zerstörende Operation wie das Hinzufügen oder Löschen von Daten in umgekehrter Reihenfolge stattfindet und die Liste nur zur Anzeige gerendert wird, ist die Verwendung des Index als Schlüssel kein Problem.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!