Récupération des données de formulaire par événement dans Vue

Supposons que nous ayons un bouton et un champ de saisie dans lequel un nombre est entré. Appuyons sur le bouton pour afficher le carré du nombre saisi dans le champ. Passons à la mise en œuvre.

Pour résoudre le problème, nous aurons besoin de deux propriétés. La propriété num sera modifiée lors de la saisie des données dans le champ, et dans la propriété res nous enregistrerons le résultat de l'élévation au carré :

data() {
	return {
		num: 0,
		res: 0
	}
}

Maintenant, créons un champ de saisie, lions-le à la propriété num, créons un bouton sur lequel un clic exécutera la méthode calc, et créons également un paragraphe dans lequel le résultat sera affiché :

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

Écrivons maintenant l'implémentation de la méthode calc :

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

Il en résultera que dès que la méthode calc est appelée (ce qui se produit lors d'un appui sur le bouton), la propriété res est mise à jour avec le résultat et celui-ci s'affiche simultanément dans notre paragraphe.

Un champ de saisie est donné. Un bouton est donné. Un paragraphe est donné. Un nombre est saisi dans le champ. Faites en sorte qu'à l'appui sur le bouton, la racine carrée de ce nombre apparaisse dans le paragraphe.

Deux champs de saisie sont donnés. Un bouton est donné. Un paragraphe est donné. Des nombres sont saisis dans chaque champ. Faites en sorte qu'à l'appui sur le bouton, la somme de ces nombres apparaisse dans le paragraphe.

Deux champs de saisie sont donnés. Un bouton est donné. Du texte est saisi dans chaque champ. Faites en sorte qu'à l'appui sur le bouton, le texte du premier champ passe dans le second et vice versa.

Un champ de saisie, 3 paragraphes et un bouton sont donnés. Le nom complet de l'utilisateur est saisi dans le champ, séparé par des espaces. Faites en sorte qu'à l'appui sur le bouton, le premier paragraphe affiche le nom de famille de l'utilisateur, le deuxième - le prénom, et le troisième - le patronyme.