Kétirányú adatkötés input mezőkhöz Vue-ban

Most megtanuljuk, hogyan dolgozzunk input mezőkkel a Vue keretrendszerben. Segítségükkel reaktívan fogunk adatokat hozzáadni az oldalhoz. Kezdjük is. Tegyük fel, hogy van egy input mezőnk:

<template>
	<input>
</template>

Tegyük fel továbbá, hogy van egy message tulajdonságunk:

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

Összeköthetjük ezt a tulajdonságot és az input mezőt úgy, hogy bármelyik megváltoztatása a másik megváltoztatásához vezet. Ezt a v-model direktívával tehetjük meg, amelyben megadjuk az input mezőhöz kötött tulajdonságot.

Kössük hozzá az input mezőnkhöz a message tulajdonságot:

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

A kód indítása után az input mezőben a message tulajdonság szövege fog megjelenni. És ha szerkesztjük az input mező adatait - a tulajdonság is megváltozik ennek megfelelően. Hogy ezt lássuk, írjuk ki a beírt tartalmat valahol egy bekezdésben:

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

Adott egy input mező. Tegye meg, hogy a beírt szöveg azonnal megjelenjen az alatta lévő bekezdésben.

Módosítsa az előző feladatot úgy, hogy a szöveg nagybetűkkel jelenjen meg.

Adott egy input mező. Tegyük fel, hogy egy számot írunk bele. Tegye meg, hogy a bekezdésben a beírt szám négyzete jelenjen meg a beírás során.