Vormi andmete saamine sündmuse järgi Vue's

Oletame, et meil on nupp ja sisendväli, kuhu sisestatakse number. Klõpsake nupul, et kuvada sisestatud arvu ruut sisendväljas. Asume rakendamise juurde.

Ülesande lahendamiseks vajame kahte omadust. Omadus num muutub andmete sisestamisel sisendväljale ja omadusesse res kirjutame ruudus tulemuse:

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

Teeme nüüd sisendvälja, seome selle omadusega num, teeme nupu, millele klõpsates käivitatakse meetod calc, ja teeme ka lõigu, kuhu kuvatakse tulemus:

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

Kirjutame meetodi calc rakenduse:

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

Tuleb välja, et niipea kui meetod calc kutsutakse välja (see juhtub nupule vajutamisel), omadusesse res kirjutatakse tulemus ja samal ajal kuvatakse see meie lõigus.

Antud sisendväli. Antud nupp. Antud lõik. Sisendväljale sisestatakse number. Tehke nii, et nupule vajutades kuvataks lõigus selle arvu ruutjuur.

Antud kaks sisendvälja. Antud nupp. Antud lõik. Iga sisendväljale sisestatakse numbrid. Tehke nii, et nupule vajutades kuvataks lõigus nende arvude summa.

Antud kaks sisendvälja. Antud nupp. Iga sisendväljale sisestatakse mingi tekst. Tehke nii, et nupule vajutades muutuks esimese sisendvälja tekst teise sisendvälja omaks ja vastupidi.

Antud sisendväli, 3 lõigu ja nupp. Sisendväljale sisestatakse kasutaja ees- ja perekonnanimi tühikuga eraldatuna. Tehke nii, et nupule vajutades esimeses lõigus kuvataks kasutaja perekonnanimi, teises - eesnimi ja kolmandas - teine eesnimi (kui on).