Reactividad en el framework Vue

Cualquier cambio en los datos de data conduce a un cambio instantáneo en la visualización de estos datos en la página. Este comportamiento de Vue se llama reactividad.

Comprobémoslo en la práctica. Supongamos que tenemos la siguiente propiedad:

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

Mostremos el valor de esta propiedad:

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

Hagamos un botón, al hacer clic en el cual cambiará nuestra propiedad:

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

Escribamos ahora el método que será invocado al hacer clic en el botón y cambiará la propiedad:

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

Si juntamos todo el código y hacemos clic en el botón - el texto en la pantalla reactivamente cambiará a otro.

Se da la propiedad text. Muestre el contenido de esta propiedad en algún párrafo.

Se da un botón. Haga que al hacer clic en este botón el valor de la propiedad text cambie reactivamente a otro.

Se dan dos botones. Haga que al hacer clic en el primer botón el valor de la propiedad text cambie reactivamente a un valor, y al hacer clic en el segundo - a otro.