Reattività nel framework Vue

Qualsiasi modifica ai dati in data porta a un cambiamento immediato della visualizzazione di questi dati sulla pagina. Questo comportamento di Vue è chiamato reattività.

Verifichiamolo nella pratica. Supponiamo di avere la seguente proprietà:

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

Visualizziamo il valore di questa proprietà:

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

Creiamo un pulsante, al click del quale cambierà la nostra proprietà:

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

Scriviamo ora il metodo che verrà chiamato al click sul pulsante e modificherà la proprietà:

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

Se si mette insieme tutto il codice e si preme il pulsante - il testo sullo schermo reattivamente cambierà in un altro.

Data la proprietà text. Visualizza il contenuto di questa proprietà in un paragrafo.

Dato un pulsante. Fai in modo che al click su questo pulsante il valore della proprietà text cambi reattivamente in un altro.

Dati due pulsanti. Fai in modo che al click sul primo pulsante il valore della proprietà text cambi reattivamente in un valore, e al click sul secondo - in un altro.