Дар Vue дарёфти маълумоти форм ба воситаи воқеа

Бигзор мо як тугма ва як воридкунӣ (input) дорем, ки ба он рақам ворид мешавад. Биёед бо пахш кардан ба тугма чаҳоркунии рақами воридшуда ба воридкуниро чоп кунем. Ба иҷро шурӯъ кунем.

Барои ҳалли масъала ба ду хусусият (property) ниёз дорем. Хусусияти num ҳангоми ворид кардани маълумот ба воридкунӣ тағйир меёбад, ва дар хусусияти res мо натиҷаи чаҳоркунӣро сабт мекунем:

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

Биёед акнун як воридкунӣ (input) созем, онро ба хусусияти num пайвастем, як тугма созем, ки бо клик кардан ба он усули calc иҷро шавад, ва инчунин як абзас (paragraph) созем, ки ба он натиҷа чоп шавад:

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

Биёед татбиқи усули calc-ро нависем:

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

Ҳамин тавр мешавад, ки вақте ки усули calc даъват шавад (ва ин бо пахш кардан ба тугма рӯй медиҳад), ба хусусияти res натиҷа сабт мешавад ва дар ҳамон вақт дар абзаси мо чоп мешавад.

Як воридкунӣ (input) дода шудааст. Як тугма дода шудааст. Як абзас дода шудааст. Ба воридкунӣ рақам ворид мешавад. Чунке чӣ кор кунед, то ки бо пахш кардан ба тугма дар абзас решаи квадратии ин рақам пайдо шавад.

Ду воридкунӣ (input) дода шудаанд. Як тугма дода шудааст. Як абзас дода шудааст. Ба ҳар як воридкунӣ рақамҳо ворид мешаванд. Чунке чӣ кор кунед, то ки бо пахш кардан ба тугма дар абзас ҷамъи ин рақамҳо пайдо шавад.

Ду воридкунӣ (input) дода шудаанд. Як тугма дода шудааст. Ба ҳар як воридкунӣ матне ворид мешавад. Чунке чӣ кор кунед, то ки бо пахш кардан ба тугма матни воридкунии аввал дар дуввум гардад ва баръакс.

Як воридкунӣ (input), 3 абзас ва як тугма дода шудааст. Ба воридкунӣ ФИО-и корбар тавассути фосила ворид мешавад. Чунке чӣ кор кунед, то ки бо пахш кардан ба тугма дар абзаси аввал насаби корбар пайдо шавад, дар абзаси дуввум - ном, ва дар абзаси сеюм - номи падар.