Деректер формасын 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 абзац және түйме берілген. Енгізу өрісіне пайдаланушының АЖО бос орын арқылы енгізіледі. Түймені басу арқылы бірінші абзацта пайдаланушының тегі, екіншісінде - аты, ал үшіншісінде - әкесінің аты пайда болатындай етіңіз.