Liaison de données bidirectionnelle avec les champs de saisie dans Vue

Maintenant, nous allons apprendre à travailler avec les champs de saisie dans le framework Vue. Avec leur aide, nous ajouterons des données de manière réactive sur la page. Commençons. Supposons que nous ayons un champ de saisie :

<template>
	<input>
</template>

Supposons également que nous ayons une propriété message :

data() {
	return {
		message: 'hello',
	}
}

Nous pouvons lier cette propriété et le champ de saisie de telle sorte que la modification de l'un d'eux entraîne la modification de l'autre. Cela se fait à l'aide de la directive v-model, dans laquelle on spécifie la propriété liée au champ de saisie.

Lions à notre champ de saisie la propriété message :

<template>
	<input v-model="message">
</template>

Après l'exécution du code, le texte de la propriété message sera présent dans le champ de saisie. Et si vous modifiez les données dans le champ de saisie - la propriété changera également en conséquence. Pour le voir, affichons le contenu saisi dans le champ quelque part dans un paragraphe :

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Un champ de saisie est donné. Faites en sorte que le texte saisi dans le champ de saisie soit immédiatement affiché dans le paragraphe en dessous.

Modifiez la tâche précédente pour que le texte soit affiché en majuscules.

Un champ de saisie est donné. Supposons qu'un nombre y soit saisi. Faites en sorte que le carré du nombre saisi soit affiché dans le paragraphe au fur et à mesure de la saisie.