Атрыманне даных формы па падзеі ў 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 запiшацца рэзультат і пры гэтым адначасова выведзецца ў нашым абзацы.

Дадзены інпут. Дадзена кнопка. Дадзены абзац. У інпут уводзіцца лік. Зрабіце так, каб па націску на кнопку абзацы з'явіўся квадратны корань гэтага ліку.

Дадзены два інпуты. Дадзена кнопка. Дадзены абзац. У кожны інпут уводзяцца дадатныя лікі. Зрабіце так, каб па націску на кнопку ў абзацы з'явілася сума гэтых лікаў.

Дадзены два інпуты. Дадзена кнопка. У кожны інпут уводзіцца нейкі тэкст. Зрабіце так, каб па націску на кнопку тэкст першага інпута стаў у другім і наадварот.

Дадзены інпут, 3 абзацы і кнопка. У інпут уводзіцца ПІБ карыстальніка праз прабел. Зрабіце так, каб па націску на кнопку ў першым абзацы з'явілася прозвішча карыстальніка, у другім - імя, а ў трэцім - імя па бацьку.