Réactivité dans le framework Vue

Toute modification des données de data entraîne un changement instantané de l'affichage de ces données sur la page. Ce comportement de Vue est appelé réactivité.

Vérifions cela en pratique. Supposons que nous ayons la propriété suivante :

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

Afficherons la valeur de cette propriété :

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

Créons un bouton sur lequel un clic modifiera notre propriété :

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

Écrivons maintenant la méthode qui sera appelée lors d'un clic sur le bouton et qui modifiera la propriété :

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

Si l'on rassemble tout le code et que l'on clique sur le bouton - le texte à l'écran changera réactivement pour un autre.

Étant donné la propriété text. Affichez le contenu de cette propriété dans un paragraphe.

Étant donné un bouton. Faites en sorte qu'un clic sur ce bouton change la valeur de la propriété text de manière réactive pour une autre.

Étant donné deux boutons. Faites en sorte qu'un clic sur le premier bouton change la valeur de la propriété text de manière réactive pour une valeur, et un clic sur le second - pour une autre.