Vue'до форманын маалыматтарын окуя боюнча алуу

Анда бизде баскыч жана сан киргизилүүчү инпут бар деп коёлу. Баскычты басуу менен инпутка киргизилген сандын квадратын чыгаралы. Ишке ашырууга киришели.

Маселени чечүү үчүн бизге эки касиет керек болот. num касиети инпутка маалыматтар киргизилген сайын өзгөрөт, ал эми res касиетине квадратка көтөрүүнүн натыйжасын жазабыз:

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

Эми инпутту жасап, ага num касиетин байлап коёлу, чыкылдатуу менен calc методу аткарыла турган баскычты жасап, ошондой эле натыйжа чыгарыла турган абзацты да жасайлы:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">иштетүү</button>
</template>

Эми calc методунун ишке ашырылышын жазалы:

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

Мына ушундай болот: calc методу чакырылганда (бул баскычты басуу менен болот), res касиетине натыйжа жазылат жана бир эле убакта биздин абзацыбызда көрсөтүлөт.

Инпут берилген. Баскыч берилген. Абзац берилген. Инпутка сан киргизилет. Баскычты басуу менен абзацта ошол сандын квадрат тамыры пайда болушун камсыз кылыңыз.

Эки инпут берилген. Баскыч берилген. Абзац берилген. Ар бир инпутка сандар киргизилет. Баскычты басуу менен абзацта ушул сандардын суммасы пайда болушун камсыз кылыңыз.

Эки инпут берилген. Баскыч берилген. Ар бир инпутка кандайдыр бир текст киргизилет. Баскычты басуу менен биринчи инпуттун тексти экинчисинде, ал эми экинчининки биринчисинде көрүнүшүн камсыз кылыңыз.

Инпут, 3 абзац жана баскыч берилген. Инпутка колдонуучунун ФИОсу боштук менен ажыратылып киргизилет. Баскычты басуу менен биринчи абзацта колдонуучунун фамилиясы, экинчисинде - аты, үчүнчүсүндө - атасынын аты пайда болушун камсыз кылыңыз.