Извличане на данни от формуляр при събитие във Vue

Нека имаме бутон и поле за въвеждане, в което се въвежда число. Нека при натискане на бутона да изведем квадрата на въведеното в полето число. Да пристъпим към реализацията.

За решаването на задачата ще ни трябват две свойства. Свойството num ще се променя при въвеждане на данни в полето, а в свойството res ще записваме резултата от повдигането на квадрат:

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

Сега нека направим поле за въвеждане, да свържем към него свойството num, направим бутон, при кликване върху който ще се изпълнява метод calc, и също така направим абзац, в който ще се извежда резултатът:

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

Нека напишем реализацията на метода calc:

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

Ще се получи така, че щом бъде извикан методът calc (а това ще се случи при натискане на бутона), в свойството res ще се запише резултатът и в същото време ще се изведе в нашия абзац.

Дадено е поле за въвеждане. Даден е бутон. Даден е абзац. В полето се въвежда число. Направете така, че при натискане на бутона в абзаца да се появи корен квадратен от това число.

Дадени са две полета за въвеждане. Даден е бутон. Даден е абзац. Във всяко поле се въвеждат числа. Направете така, че при натискане на бутона в абзаца да се появи сумата от тези числа.

Дадени са две полета за въвеждане. Даден е бутон. Във всяко поле се въвежда някакъв текст. Направете така, че при натискане на бутона текстът от първото поле да отиде във второто и обратно.

Дадено е поле за въвеждане, 3 абзаца и бутон. В полето се въвежда Пълно име на потребител (ФИО) чрез интервал. Направете така, че при натискане на бутона в първия абзац да се появи фамилията на потребителя, във втория - името, а в третия - презимето.