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