Двострано повезивање података за уносима у Vue

Сада ћемо научити раду са уносима у Vue оквиру. Њиховом помоћу ћемо реактивно додавати податке на страницу. Хајде да почнемо. Нека имамо унос:

<template>
	<input>
</template>

Нека такође имамо својство message:

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

Можемо повезати ово својство и унос на такав начин да промена било ког од њих доведе до промене другог. То се ради уз помоћ директивe v-model, у којој се наводи својство повезано са уносом.

Хајде да повежемо са нашим уносом својство message:

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

Након покретања кода у уносу ће стајати текст својства message. А ако се измене подаци у уносу - својство ће се такође променити на одговарајући начин. Да бисмо то видели, хајде да прикажемо унети у унос садржај негде у параграфу:

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

Дат је унос. Направите тако да унети у унос текст одмах буде приказан у параграфу испод њега.

Модификујте претходни задатак тако, да се текст приказује великим словима.

Дат је унос. Нека се у њега уноси број. Направите тако да у параграфу док се уноси приказује квадрат унетог броја.