Hent formulardata ved event i Vue

Lad os sige, at vi har en knap og et inputfelt, hvor et tal indtastes. Lad os ved at trykke på knappen udskrive kvadratet på det tal, der er indtastet i inputfeltet. Lad os gå i gang med implementeringen.

For at løse opgaven har vi brug for to egenskaber. Egenskaben num vil ændre sig efterhånden som data indtastes i inputfeltet, og i egenskaben res vil vi gemme resultatet af at opløfte til anden potens:

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

Lad os nu lave inputfeltet, binde det til egenskaben num, lave en knap, der ved klik udfører metoden calc, og også lave et afsnit, hvor resultatet vil blive vist:

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

Lad os skrive implementeringen af metoden calc:

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

Resultatet bliver, at så snart metoden calc kaldes (hvilket sker ved tryk på knappen), vil resultatet blive skrevet til egenskaben res og samtidig vises i vores afsnit.

Der gives et inputfelt. Der gives en knap. Der gives et afsnit. Et tal indtastes i inputfeltet. Gør så, ved at trykke på knappen, at kvadratroden af tallet vises i afsnittet.

Der gives to inputfelter. Der gives en knap. Der gives et afsnit. Tal indtastes i hvert inputfelt. Gør så, at ved at trykke på knappen vises summen af disse tal i afsnittet.

Der gives to inputfelter. Der gives en knap. Der indtastes en eller anden tekst i hvert inputfelt. Gør så, at ved at trykke på knappen bliver teksten fra det første inputfelt placeret i det andet og omvendt.

Der gives et inputfelt, 3 afsnit og en knap. Et fulde navn indtastes i inputfeltet adskilt af mellemrum. Gør så, at ved at trykke på knappen vises brugerens efternavn i det første afsnit, i det andet - fornavn, og i det tredje - mellemnavn.