Obosmerné väzby dát na vstupy vo Vue

Teraz sa naučíme pracovať so vstupmi vo frameworku Vue. S ich pomocou budeme reaktívne pridávať dáta na stránku. Poďme na to. Predpokladajme, že máme vstup:

<template>
	<input>
</template>

Predpokladajme tiež, že máme vlastnosť message:

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

Môžeme prepojiť túto vlastnosť a vstup tak, že zmena ktoréhokoľvek z nich povedie k zmene druhého. To sa robí pomocou direktívy v-model, v ktorej je uvedená vlastnosť viazaná na vstup.

Poďme naviazať na náš vstup vlastnosť message:

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

Po spustení kódu bude vo vstupe text vlastnosti message. A ak upravíte dáta vo vstupe - vlastnosť sa tiež zmení príslušným spôsobom. Aby sme to videli, poďme zobraziť obsah zadaný do vstupu niekde v odseku:

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

Je daný vstup. Zabezpečte, aby sa text zadaný do vstupu okamžite zobrazoval v odseku pod ním.

Upravte predchádzajúcu úlohu tak, aby sa text zobrazoval vo veľkom písme.

Je daný vstup. Nech sa do neho zadáva číslo. Zabezpečte, aby sa v odseku počas zadávania zobrazovala druhá mocnina zadaného čísla.