Reaktivität im Vue-Framework

Jede Änderung der Daten aus data führt zu einer sofortigen Änderung der Darstellung dieser Daten auf der Seite. Dieses Verhalten von Vue wird Reaktivität genannt.

Lassen Sie uns das in der Praxis überprüfen. Angenommen, wir haben die folgende Eigenschaft:

data() {
	return {
		text: 'xxx',
	}
}

Lassen Sie uns den Wert dieser Eigenschaft ausgeben:

<template>
	{{ text }}
</template>

Erstellen wir einen Button, bei dessen Klick sich unsere Eigenschaft ändert:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Schreiben wir nun eine Methode, die beim Klick auf den Button aufgerufen wird und die Eigenschaft ändert:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Wenn Sie den gesamten Code zusammenführen und auf den Button klicken - ändert sich der Text auf dem Bildschirm reaktiv in einen anderen.

Gegeben ist die Eigenschaft text. Geben Sie den Inhalt dieser Eigenschaft in einem Absatz aus.

Gegeben ist ein Button. Sorgen Sie dafür, dass beim Klick auf diesen Button der Wert der Eigenschaft text sich reaktiv in einen anderen ändert.

Gegeben sind zwei Buttons. Sorgen Sie dafür, dass beim Klick auf den ersten Button der Wert der Eigenschaft text sich reaktiv in einen Wert ändert, und beim Klick auf den zweiten - in einen anderen.