Vue-da Inputlara Ikiterefli Data Binding

Indi biz Vue frameworkunda inputlarla islemeyi oyreneceyik. Onlarin vasitesile sehifeye reaktiv sekilde data elave edeceyik. Gelın baslayaq. Tutaq ki, bizim bir inputumuz var:

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

Tutaq ki, bizim hemcinin message xususiyyetimiz var:

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

Biz bu xususiyyeti ve inputu elaqelendire bilerik ki, onlardan her hansi birinin deyisdirilmesi digərinin deyismesine getirib cixarsin. Bu, inputa baglanan xususiyyeti gosteren v-model direktivi vasitesile edilir.

Gelin inputumuzu message xususiyyetine baglayaq:

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

Kodu ise saldiqdan sonra inputda message xususiyyetinin metni olacaq. Əgər inputdakı melumatları redakte etseniz - xususiyyet de muvafiq sekilde deyisecek. Bunu gormek ucun gelin inputa daxil edilen mezmunu hardasa bir abzasda cixartaq:

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