Vinculação bidirecional de dados a inputs em Vue

Agora vamos aprender a trabalhar com inputs no framework Vue. Com eles, adicionaremos dados à página de forma reativa. Vamos começar. Suponha que temos um input:

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

Suponha também que temos uma propriedade message:

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

Podemos vincular esta propriedade e o input de tal forma que a alteração de qualquer um deles leva à alteração do outro. Isso é feito usando a diretiva v-model, na qual a propriedade vinculada ao input é especificada.

Vamos vincular a propriedade message ao nosso input:

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

Após executar o código, o texto da propriedade message estará no input. E se editarmos os dados no input - a propriedade também mudará de acordo. Para ver isso, vamos exibir o conteúdo digitado no input em algum parágrafo:

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