Dubbelriktad databindning till inputfält i Vue

Nu ska vi lära oss att arbeta med inputfält i Vue-ramverket. Med deras hjälp kommer vi att lägga till data på sidan reaktivt. Låt oss komma igång. Låt oss säga att vi har ett inputfält:

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

Låt oss också anta att vi har en egenskap message:

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

Vi kan koppla denna egenskap och inputfältet på ett sådant sätt att förändring i någon av dem leder till en förändring i den andra. Detta görs med hjälp av direktivet v-model, där egenskapen som är kopplad till inputfältet anges.

Låt oss koppla vår egenskap message till vårt inputfält:

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

Efter att koden har startats kommer texten från egenskapen message att finnas i inputfältet. Och om man redigerar data i inputfältet kommer egenskapen också att ändras i enlighet med detta. För att se detta, låt oss visa innehållet som skrivits in i inputfältet någonstans i ett stycke:

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