Formos duomenų gavimas pagal įvykį Vue

Tarkime, kad turime mygtuką ir įvesties lauką, į kurį įvedamas skaičius. Paspaudus mygtuką atspausdinkime įvesto skaičiaus kvadratą. Pradėkime įgyvendinimą.

Užduočiai išspręsti mums reikės dviejų savybių. Savybė num keisis kai įvedami duomenys į įvesties lauką, o į savybę res įrašysime kvadrato pakėlimo rezultatą:

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

Dabar padarykime įvesties lauką, susiekime jį su savybe num, padarykime mygtuką, kuriį paspaudus bus vykdomas metodas calc, ir taip pat padarykime pastraipą, į kurią bus išvedamas rezultatas:

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

Parašykime metodo calc implementaciją:

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

Taip bus, kad kai tik bus iškviestas metodas calc (o tai atsitiks paspaudus mygtuką), į savybę res bus įrašytas rezultatas ir tuo pačiu metu atsispausdins mūsų pastraipoje.

Duotas įvesties laukas. Duotas mygtukas. Duota pastraipa. Į įvesties lauką įvedamas skaičius. Padarykite taip, kad paspaudus mygtuką pastraipoje atsirastų šio skaičiaus kvadratinė šaknis.

Duoti du įvesties laukai. Duotas mygtukas. Duota pastraipa. Į kiekvieną įvesties lauką įvedami skaičiai. Padarykite taip, kad paspaudus mygtuką pastraipoje atsirastų šių skaičių suma.

Duoti du įvesties laukai. Duotas mygtukas. Į kiekvieną įvesties lauką įvedamas koks nors tekstas. Padarykite taip, kad paspaudus mygtuką pirmo įvesties lauko tekstas atsirastų antrajame ir atvirkščiai.

Duotas įvesties laukas, 3 pastraipos ir mygtukas. Į įvesties lauką įvedamas vartotojo Vardas Pavardė per tarpą. Padarykite taip, kad paspaudus mygtuką pirmoje pastraipoje atsirastų vartotojo pavardė, antroje - vardas, o trečioje - patronimas.