Двухбаковая прывязка даных да інпутаў у Vue

Зараз мы навучымся працы з інпутамі у фрэймворку Vue. З іх дапамогай мы будзем рэактыўна дадаваць даныя на старонку. Давайце прыступім. Хай у нас ёсць інпут:

<template>
	<input>
</template>

Хай таксама ў нас ёсць уласцівасць message:

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

Мы можам звязаць гэту ўласцівасць і інпут такім чынам, каб змена любога з іх прыводзіла да змены другога. Гэта робіцца з дапамогай дырэктывы v-model, у якой паказваецца ўласцівасць, прывязаная да інпута.

Давайце прывяжам да нашага інпута ўласцівасць message:

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

Пасля запуску кода ў інпуце будзе стаяць тэкст уласцівасці message. А калі папраўляць даныя ў інпуце - уласцівасць таксама зменіцца адпаведным чынам. Каб убачыць гэта, давайце вывядзем уведзенае ў інпут змесціва дзе-небудзь у абзацы:

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

Дадзены інпут. Зрабіце так, каб уводзімы ў інпут тэкст адразу вывадзіўся ў абзацы пад ім.

Мадыфікуйце папярэднюю задачу так, каб тэкст вывадзіўся ў верхнім рэгістры.

Дадзены інпут. Хай у яго ўводзіцца лік. Зрабіце так, каб у абзацы па меры ўводу вывадзіўся квадрат уводзімага ліку.