Henting av skjemadata ved hendelse i Vue

La oss si at vi har en knapp og et input-felt, der et tall skrives inn. La oss ved et trykk på knappen skrive ut kvadratet av tallet som er skrevet inn i input-feltet. La oss starte implementeringen.

For å løse oppgaven trenger vi to egenskaper. Egenskapen num vil endres etter hvert som data skrives inn i input-feltet, og i egenskapen res vil vi skrive resultatet av opphøyning i kvadrat:

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

La oss nå lage et input-felt, binde det til egenskapen num, lage en knapp, der et klikk på den vil utføre metoden calc, og også lage et avsnitt, der resultatet vil bli vist:

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

La oss skrive implementeringen av metoden calc:

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

Resultatet blir at så snart metoden calc kalles (og dette skjer ved et trykk på knappen), vil resultatet skrives til egenskapen res og samtidig vises i vårt avsnitt.

Det er gitt et input-felt. Det er gitt en knapp. Det er gitt et avsnitt. I input-feltet skrives det inn et tall. Gjør slik at ved et trykk på knappen vises kvadratroten av dette tallet i avsnittet.

Det er gitt to input-felt. Det er gitt en knapp. Det er gitt et avsnitt. I hvert input-felt skrives det inn tall. Gjør slik, at ved et trykk på knappen vises summen av disse tallene i avsnittet.

Det er gitt to input-felt. Det er gitt en knapp. I hvert input-felt skrives det inn en tekst. Gjør slik at ved et trykk på knappen byttes teksten i det første input-feltet med teksten i det andre og omvendt.

Det er gitt et input-felt, 3 avsnitt og en knapp. I input-feltet skrives det inn et brukerens fullt navn (fornavn, etternavn, mellomnavn) med mellomrom. Gjør slik at ved et trykk på knappen vises etternavnet i det første avsnittet, fornavnet i det andre, og mellomnavnet i det tredje.