Hämta formulärdata vid händelse i Vue

Låt oss säga att vi har en knapp och en input där ett nummer matas in. Låt oss vid klick på knappen visa kvadraten på det nummer som matats in i inputfältet. Låt oss börja med implementationen.

För att lösa uppgiften behöver vi två egenskaper. Egenskapen num kommer att ändras allt eftersom data matas in i inputfältet, och i egenskapen res kommer vi att skriva resultatet av upphöjt till två:

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

Låt oss nu skapa inputfältet, bind det till egenskapen num, skapa en knapp som vid klick kommer att köra metoden calc, och låt oss också skapa ett stycke dit resultatet kommer att skrivas ut:

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

Låt oss skriva implementationen av metoden calc:

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

Resultatet blir att så snart metoden calc anropas (vilket händer vid ett klick på knappen), kommer resultatet att skrivas till egenskapen res och samtidigt visas i vårt stycke.

Det finns ett inputfält. Det finns en knapp. Det finns ett stycke. Ett nummer matas in i inputfältet. Gör så att vid klick på knappen visas kvadratroten av detta nummer i stycket.

Det finns två inputfält. Det finns en knapp. Det finns ett stycke. Nummer matas in i varje inputfält. Gör så att vid klick på knappen visas summan av dessa nummer i stycket.

Det finns två inputfält. Det finns en knapp. Text matas in i varje inputfält. Gör så att vid klick på knappen hamnar texten från det första inputfältet i det andra och vice versa.

Det finns ett inputfält, 3 stycken och en knapp. Ett användarens för- och efternamn matas in i inputfältet, separerade med mellanslag. Gör så att vid klick på knappen i det första stycket visas användarens efternamn, i det andra - förnamnet, och i det tredje - patronymikon.