Obousměrné datové vazby na vstupy ve Vue

Nyní se naučíme pracovat se vstupy ve frameworku Vue. Pomocí nich budeme reaktivně přidávat data na stránku. Pojďme začít. Předpokládejme, že máme vstup:

<template>
	<input>
</template>

Předpokládejme také, že máme vlastnost message:

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

Můžeme propojit toto vlastnost a vstup tak, aby změna kteréhokoli z nich vedla ke změně druhého. To se provádí pomocí direktivy v-model, ve které se uvádí vlastnost svázaná se vstupem.

Pojďme svázat s naším vstupem vlastnost message:

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

Po spuštění kódu bude ve vstupu text vlastnosti message. A pokud upravíte data ve vstupu - vlastnost se také změní odpovídajícím způsobem. Abyste to viděli, pojďme zobrazit obsah zadaný do vstupu někde v odstavci:

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

Je dán vstup. Zařiďte, aby se text zadaný do vstupu okamžitě zobrazoval v odstavci pod ním.

Upravte předchozí úlohu tak, aby se text zobrazoval ve velkých písmenech.

Je dán vstup. Nechť se do něj zadává číslo. Zařiďte, aby se v odstavci během zadávání zobrazovala druhá mocnina zadaného čísla.