Enlace de datos bidireccional a inputs en Vue

Ahora aprenderemos a trabajar con inputs en el framework Vue. Con su ayuda agregaremos datos reactivamente en la página. Empecemos. Supongamos que tenemos un input:

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

Supongamos también que tenemos una propiedad message:

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

Podemos vincular esta propiedad y el input de tal manera que el cambio en cualquiera de ellos conduzca al cambio en el otro. Esto se hace mediante la directiva v-model, en la que se especifica la propiedad vinculada al input.

Vinculemos a nuestro input la propiedad message:

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

Después de ejecutar el código, en el input estará el texto de la propiedad message. Y si editamos los datos en el input - la propiedad también cambiará correspondientemente. Para ver esto, mostremos el contenido ingresado en el input en algún lugar de un párrafo:

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