Vue හි ආදාන සඳහා ද්වි-පාර්ශ්වීය දත්ත බැඳීම
දැන් අපි Vue රාමුවේ ආදාන සමඟ වැඩ කිරීම ඉගෙන ගනිමු. ඒවා භාවිතා කරමින් අපි පිටුවට ප්රතික්රියාශීලීව දත්ත එකතු කරමු. අපි ආරම්භ කරමු. අපට ආදානයක් ඇතැයි සිතමු:
<template>
<input>
</template>
අපට ද ගුණාංගය message ඇතැයි සිතමු:
data() {
return {
message: 'hello',
}
}
අපට මෙම ගුණාංගය සහ ආදානය ඒවායින් එකක් වෙනස් කිරීම අනෙක වෙනස් කිරීමට
නැඹුරු වන පරිදි සම්බන්ධ කළ හැකිය.
මෙය සිදු කරනු ලබන්නේ v-model නියෝජනය භාවිතා කරමිනි,
එහිදී ආදානයට බන්ධනය කර ඇති දේපල සඳහන් කර ඇත.
අපගේ ආදානයට ගුණාංගය message බැඳීමට ඉඩ දෙන්න:
<template>
<input v-model="message">
</template>
කේතය ආරම්භ කිරීමෙන් පසු, ආදානයේ ගුණාංගයේ message පෙළ පවතිනු ඇත.
ආදානයේ දත්ත සංස්කරණය කරන්නේ නම් - දේපල ද ඒ අනුව වෙනස් වේ.
මෙය දැකීමට, අපි ආදානයට ඇතුළත් කරන ලද අන්තර්ගතය කොහේ හෝ ඡේදයක් තුළ පෙන්වමු:
<template>
<input v-model="message">
<p>{{ message }}</p>
</template>
ආදානයක් ලබා දී ඇත. ආදානයට ඇතුළත් කරන ලද පෙළ වහාම එහි යටින් ඇති ඡේදයේ ප්රදර්ශනය වන පරිදි සකසන්න.
පෙර කාර්යය වෙනස් කරන්න එවිට පෙළ ඉහළ නංවන ලදී ලියාපදිංචිය.
ආදානයක් ලබා දී ඇත. එය අංකයක් ඇතුළත් කිරීමට ඉඩ දෙන්න. ඡේදය අනුව එසේ කරන්න ඇතුළත් කිරීම ඇතුළත් කරන ලද අංකයේ වර්ගය ප්රදර්ශනය කරයි.
