Вьюда форма маълумотларини воқеа буйича олиш

Фарз қилайлик, бизда тугмача ва киритиладиган рақам бор инпут мавжуд. Тугмача босилганда инпутга киритилган рақамнинг квадратини чиқарайлик. Амалга оширишни бошлаймиз.

Масалани ечиш учун бизга иккита свойство зарур. 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 та абзац ва тугмача берилган. Инпутга фойдаланувчининг ФИОси бўшлиқ орқали киритилади. Тугмача босилганда биринчи абзацда фойдаланувчининг фамилияси, иккинчисида - исми, ва учинчисида - шарифи пайдо бўлиши учун қилинг.