Reactiviteit in het Vue-framework

Elke wijziging van gegevens uit data leidt tot een onmiddellijke wijziging van de weergave van deze gegevens op de pagina. Dit gedrag van Vue wordt reactiviteit genoemd.

Laten we het in de praktijk testen. Stel dat we de volgende eigenschap hebben:

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

Laten we de waarde van deze eigenschap weergeven:

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

Laten we een knop maken waarop, wanneer erop wordt geklikt, onze eigenschap zal veranderen:

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

Laten we nu een methode schrijven die wordt aangeroepen bij een klik op de knop en de eigenschap wijzigt:

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

Als je alle code samenvoegt en op de knop drukt - zal de tekst op het scherm reactief veranderen in een andere.

Gegeven de eigenschap text. Geef de inhoud van deze eigenschap weer in een alinea.

Gegeven een knop. Zorg ervoor dat bij een klik op deze knop de waarde van de eigenschap text reactief verandert in een andere.

Gegeven twee knoppen. Zorg ervoor dat bij een klik op de eerste knop de waarde van de eigenschap text reactief verandert in de ene waarde, en bij een klik op de tweede - in de andere.