Двупосочна връзка на данни с инпути във 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>

Даден е инпут. Направете така, че въведеният в инпута текст веднага да се извежда в абзац под него.

Модифицирайте предходната задача така, че текстът да се извежда в горен регистър.

Даден е инпут. Нека в него се въвежда число. Направете така, че в абзаца с въвеждането да се извежда квадратът на въведеното число.