Vue හි ආදාන සඳහා ද්වි-පාර්ශ්වීය දත්ත බැඳීම

දැන් අපි Vue රාමුවේ ආදාන සමඟ වැඩ කිරීම ඉගෙන ගනිමු. ඒවා භාවිතා කරමින් අපි පිටුවට ප්‍රතික්‍රියාශීලීව දත්ත එකතු කරමු. අපි ආරම්භ කරමු. අපට ආදානයක් ඇතැයි සිතමු:

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

අපට ද ගුණාංගය message ඇතැයි සිතමු:

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

අපට මෙම ගුණාංගය සහ ආදානය ඒවායින් එකක් වෙනස් කිරීම අනෙක වෙනස් කිරීමට නැඹුරු වන පරිදි සම්බන්ධ කළ හැකිය. මෙය සිදු කරනු ලබන්නේ v-model නියෝජනය භාවිතා කරමිනි, එහිදී ආදානයට බන්ධනය කර ඇති දේපල සඳහන් කර ඇත.

අපගේ ආදානයට ගුණාංගය message බැඳීමට ඉඩ දෙන්න:

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

කේතය ආරම්භ කිරීමෙන් පසු, ආදානයේ ගුණාංගයේ message පෙළ පවතිනු ඇත. ආදානයේ දත්ත සංස්කරණය කරන්නේ නම් - දේපල ද ඒ අනුව වෙනස් වේ. මෙය දැකීමට, අපි ආදානයට ඇතුළත් කරන ලද අන්තර්ගතය කොහේ හෝ ඡේදයක් තුළ පෙන්වමු:

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