Reaktivität von Arrays in Vue

Reaktivität tritt sogar bei Änderungen von Arrays auf, die über v-for ausgegeben werden. Lassen Sie uns als Beispiel dafür sorgen, dass beim Klicken auf einen Knopf ein neues Element reaktiv zum Array hinzugefügt wird und die Änderungen sofort auf dem Bildschirm erfolgen.

Lassen Sie uns das Beschriebene implementieren. Nehmen wir an, wir haben ein Array:

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

Geben wir die Elemente dieses Arrays in einer Schleife aus:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
</template>

Erstellen wir einen Knopf, bei dessen Klick ein neues Element zum Array hinzugefügt wird:

<template>
	<p v-for="elem in arr">
		{{ elem }}
	</p>
	<button @click="add">add</button>
</template>

Implementieren wir die entsprechende Methode:

methods: {
	add: function() {
		this.arr.push('xxx');
	}
}

Gegeben ist ein Knopf. Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass beim Klicken auf den Knopf ein neuer Punkt am Ende dieser Liste hinzugefügt wird.

Gegeben ist ein Knopf. Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass bei jedem Klick auf den Knopf der erste Punkt der Liste gelöscht wird.

Gegeben ist ein Knopf. Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass bei jedem Klick auf den Knopf der letzte Punkt der Liste gelöscht wird.

Gegeben ist ein Knopf. Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass bei jedem Klick auf den Knopf der vorletzte Punkt der Liste gelöscht wird.

Gegeben ist ein Knopf. Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass beim Klicken auf den Knopf die Punkte der Liste sortiert werden.

Gegeben ist ein Knopf. Gegeben ist ein Array. Geben Sie die Elemente dieses Arrays als Liste ul aus. Sorgen Sie dafür, dass beim Klicken auf den Knopf die Punkte der Liste in umgekehrter Reihenfolge angeordnet werden.

Ausnahmen

Aufgrund von Einschränkungen in JavaScript ist Vue nicht in der Lage, die folgenden Änderungen in einem Array zu bemerken: das direkte Setzen eines Elements über den Index: items[Schlüssel] = neuerWert und die explizite Änderung der Länge des Arrays, zum Beispiel: items.length = neueLänge.