Formuliergegevens ophalen bij event in Vue

Stel we hebben een knop en een invoerveld waarin een nummer wordt ingevoerd. Laten we bij het klikken op de knop het kwadraat van het ingevoerde nummer tonen. Laten we beginnen met de implementatie.

Om de taak op te lossen hebben we twee eigenschappen nodig. Eigenschap num zal veranderen tijdens het invoeren van gegevens in het invoerveld, en in de eigenschap res zullen we het resultaat van het kwadraat opslaan:

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

Laten we nu een invoerveld maken, het binden aan de eigenschap num, een knop maken waarbij bij klik de methode calc wordt uitgevoerd, en ook een paragraaf maken waarin het resultaat wordt getoond:

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

Laten we de implementatie van de methode calc schrijven:

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

Het resultaat is dat zodra de methode calc wordt aangeroepen (wat gebeurt bij het klikken op de knop), in de eigenschap res het resultaat wordt opgeslagen en tegelijkertijd wordt weergegeven in onze paragraaf.

Er is een invoerveld. Er is een knop. Er is een paragraaf. In het invoerveld wordt een nummer ingevoerd. Zorg ervoor dat bij het klikken op de knop in de paragraaf de vierkantswortel van dit nummer verschijnt.

Er zijn twee invoervelden. Er is een knop. Er is een paragraaf. In elk invoerveld worden nummers ingevoerd. Zorg ervoor dat bij het klikken op de knop in de paragraaf de som van deze nummers verschijnt.

Er zijn twee invoervelden. Er is een knop. In elk invoerveld wordt een tekst ingevoerd. Zorg ervoor dat bij het klikken op de knop de tekst van het eerste invoerveld in het tweede komt te staan en omgekeerd.

Er is een invoerveld, 3 paragrafen en een knop. In het invoerveld wordt de volledige naam van de gebruiker ingevoerd, gescheiden door spaties. Zorg ervoor dat bij het klikken op de knop in de eerste paragraaf de achternaam van de gebruiker verschijnt, in de tweede - de voornaam, en in de derde - de middelnaam.