Kaksisuuntainen datan sitominen input-kenttiin Vue:ssa

Nyt opimme työskentelemään input-kenttien kanssa Vue-kehyksessä. Niiden avulla lisäämme reaktiivisesti dataa sivulle. Aloitetaan. Olkoon meillä input-kenttä:

<template>
	<input>
</template>

Olkoon meillä myös ominaisuus message:

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

Voimme yhdistää tämän ominaisuuden ja input-kentän siten, että minkä tahansa niistä muuttaminen johtaa toisen muuttumiseen. Tämä tehdään käyttämällä direktiiviä v-model, jossa määritetään input-kenttään sidottu ominaisuus.

Sidotaan input-kenttäämme ominaisuus message:

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

Koodin käynnistämisen jälkeen input-kentässä on teksti ominaisuudesta message. Ja jos muokkaat dataa input-kentässä - ominaisuus myös muuttuu vastaavalla tavalla. Nähdäksesi tämän, esitetään input-kenttään syötetty sisältö jossain kappaleessa:

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

Annettu input-kenttä. Tee niin, että input-kenttään kirjoitettu teksti tulostuu välittömästi sen alla olevaan kappaleeseen.

Muokkaa edellistä tehtävää niin, että teksti tulostuu suuraakkosina.

Annettu input-kenttä. Olkoon siihen syötettynä numero. Tee niin, että kappaleessa syötön mukana tulostuu syötetyn numeron neliö.