Todirekte databinding til inputs i Vue

Nu skal vi lære at arbejde med inputs i Vue-frameworket. Med deres hjælp vil vi reaktivt tilføje data til siden. Lad os komme i gang. Lad os sige, at vi har et input:

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

Lad os også sige, at vi har en egenskab message:

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

Vi kan forbinde denne egenskab og inputtet på en sådan måde, at ændring af en af dem fører til ændring af den anden. Dette gøres ved hjælp af direktivet v-model, hvor egenskaben, der er bundet til inputtet, angives.

Lad os binde vores input til egenskaben message:

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

Efter kodekørsel vil teksten fra egenskaben message stå i inputfeltet. Og hvis man redigerer dataene i inputfeltet, vil egenskaben også ændre sig i overensstemmelse hermed. For at se dette, lad os udskrive indholdet, der er indtastet i inputfeltet, et eller andet sted i et afsnit:

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