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 պարբերություն և կոճակ: Դաշտում մուտքագրվում է օգտագործողի ԱՄԸ բացատով առանձնացված: Արվեք այնպես, որ կոճակը սեղմելիս առաջին պարբերությունում հայտնվի օգտագործողի ազգանունը, երկրորդում՝ անունը, իսկ երրորդում՝ հայրանունը: