Двусторонняя привязка данных к инпутам в Vue

Сейчас мы научимся работе с инпутами в фреймворке Vue. С их помощью мы будем реактивно добавлять данные на страницу. Давайте приступим. Пусть у нас есть инпут:

App.vue<template>
  <input>
</template>

Пусть также у нас есть свойство message:

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

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

Давайте привяжем к нашему инпуту свойство message:

App.vue<template>
  <input v-model="message">
</template>

После запуска кода в инпуте будет стоять текст свойства message. А если поредактировать данные в инпуте - свойство также изменится соответствующим образом. Чтобы увидеть это, давайте выведем введенное в инпут содержимое где-нибудь в абзаце:

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