Dvipusis duomenų susiejimas su įvesties laukais Vue

Dabar mes mokysimės dirbti su įvesties laukais Vue karkase. Jų pagalba reaktyviai pridėsime duomenis į puslapį. Pradėkime. Tarkime, kad turime įvesties lauką:

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

Tarkime, kad taip pat turime savybę message:

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

Mes galime susieti šią savybę ir įvesties lauką taip, kad bet kurio iš jų pakeitimas leistų pakeisti kitą. Tai daroma naudojant direktyvą v-model, kurioje nurodoma su įvesties lauku susieta savybė.

Pririškime prie mūsų įvesties lauko savybę message:

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

Paleidus kodą, įvesties lauke bus savybės message tekstas. O jei redaguosite duomenis įvesties lauke - savybė taip pat pasikeis atitinkamai. Norėdami tai pamatyti, atvaizduokime įvestą į įvesties lauką turinį kur nors pastraipoje:

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