Obținerea datelor din formular la eveniment în Vue

Să presupunem că avem un buton și un câmp de introducere în care se introduce un număr. Să afișăm la apăsarea butonului pătratul numărului introdus în câmp. Să începem implementarea.

Pentru a rezolva problema vom avea nevoie de două proprietăți. Proprietatea num se va modifica pe măsură ce introducem date în câmp, iar în proprietatea res vom scrie rezultatul ridicării la pătrat:

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

Acum să facem câmpul de introducere, să legăm de el proprietatea num, să facem un buton, la click pe care se va executa metoda calc, și să facem de asemenea un paragraf, în care va fi afișat rezultatul:

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

Să scriem implementarea metodei calc:

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

Se va întâmpla ca, imediat ce metoda calc este apelată (ceea ce se întâmplă la apăsarea butonului), în proprietatea res se va scrie rezultatul și în același timp se va afișa în paragraful nostru.

Este dat un câmp de introducere. Este dat un buton. Este dat un paragraf. În câmp se introduce un număr. Faceți astfel încât la apăsarea butonului în paragraf să apară rădăcina pătrată acelui număr.

Sunt date două câmpuri de introducere. Este dat un buton. Este dat un paragraf. În fiecare câmp se introduc numere. Faceți astfel încât la apăsarea butonului în paragraf să apară suma acestor numere.

Sunt date două câmpuri de introducere. Este dat un buton. În fiecare câmp se introduce un text. Faceți astfel încât la apăsarea butonului textul primului câmp să ajungă în al doilea și invers.

Este dat un câmp de introducere, 3 paragrafe și un buton. În câmp se introduce Numele și Prenumele utilizatorului separată prin spațiu. Faceți astfel încât la apăsarea butonului în primul paragraf să apară numele de familie al utilizatorului, în al doilea - prenumele, iar în al treilea - patronimul.