Toveis databinding til inputfelt i Vue

Nå skal vi lære å jobbe med inputfelt i rammeverket Vue. Med deres hjelp vil vi reaktivt legge til data på siden. La oss komme i gang. La oss si vi har et inputfelt:

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

La oss også si at vi har en egenskap message:

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

Vi kan koble denne egenskapen og inputfeltet på en slik måte at endring av en av dem fører til endring av den andre. Dette gjøres ved hjelp av direktivet v-model, der egenskapen som er bundet til inputfeltet spesifiseres.

La oss binde egenskapen message til vårt inputfelt:

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

Etter at koden kjøres, vil teksten fra egenskapen message stå i inputfeltet. Og hvis man redigerer dataene i inputfeltet, vil egenskapen også endres tilsvarende. For å se dette, la oss vise innholdet som er skrevet inn i inputfeltet et sted i et avsnitt:

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