Vue da Inputlarga Ikki Tomonlama Ma'lumotlar Bog'lash

Hozir biz Vue frameworkida inputlar bilan ishlashni o'rganamiz. Ular yordamida biz sahifaga reaktiv ravishda ma'lumot qo'shamiz. Keling, boshlaylik. Bizda input bo'lsin:

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

Shuningdek, bizda message xususiyati bo'lsin:

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

Biz ushbu xususiyat va inputni shunday bog'laymizki, ulardan birining o'zgarishi ikkinchisining o'zgarishiga olib keladi. Bunga v-model direktivi yordamida erishiladi, unda inputga bog'langan xususiyat ko'rsatiladi.

Keling, inputimizga message xususiyatini bog'laymiz:

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

Kod ishga tushgandan so'ng, inputda message xususiyatining matni bo'ladi. Agar inputdagi ma'lumotlarni tahrirlasak - xususiyat ham mos ravishda o'zgaradi. Buni ko'rish uchun, keling inputga kiritilgan tarkibni biron bir abzatsda chiqaramiz:

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