Andmeside kahesuunaline seostamine sisendväljadega Vue's

Nüüd õpime töötama sisendväljadega Vue raamistikus. Nende abil lisame lehele andmeid reaktiivselt. Alustame. Olgu meil sisendväli:

<template>
	<input>
</template>

Olgu meil ka omadus message:

data() {
	return {
		message: 'hello',
	}
}

Saame seostada selle omaduse ja sisendvälja nii, et ühe muutumine põhjustab teise muutumise. See tehakse direktiivi v-model abil, kus määratakse sisendväljaga seotud omadus.

Seostame oma sisendväljaga omaduse message:

<template>
	<input v-model="message">
</template>

Pärast koodi käivitamist on sisendväljas omaduse message tekst. Kui muuta sisendvälja andmeid, muutub omadus vastavalt. Et seda näha, kuvame sisestatud sisu mõnes lõigus:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Antud on sisendväli. Tehke nii, et sisestatud tekst kuvataks koheselt allolevas lõigus.

Modifitseerige eelmist ülesannet nii, et tekst kuvataks suurtähtedega.

Antud on sisendväli. Olgu sinna sisestatud number. Tehke nii, et lõigus kuvataks sisestatud arvu ruut.