# Двусторонняя привязка данных к инпутам в 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>`

Дан инпут. Сделайте так, чтобы вводимый в инпут текст сразу выводился в абзаце под ним.

Модифицируйте предыдущую задачу так, чтобы текст выводился в верхнем регистре.

Дан инпут. Пусть в него вводится число. Сделайте так, чтобы в абзаце по мере ввода выводился квадрат вводимого числа.

← →
↑