Vue රාමුවේ ප්රතික්රියාශීලී බව
data හි ඇති ඕනෑම දත්ත වෙනසක්
වහාම පිටුව මත එම දත්ත පෙන්වීම වෙනස් වීමට
හේතු වේ. මෙම ක්රියාකාරීත්වය
Vue හි ප්රතික්රියාශීලී බව ලෙස හැඳින්වේ.
ප්රායෝගිකව පරීක්ෂා කර බලමු. අපට පහත ගුණාංගය ඇතැයි සිතමු:
data() {
return {
text: 'xxx',
}
}
මෙම ගුණාංගයේ අගය ප්රදර්ශනය කරමු:
<template>
{{ text }}
</template>
බොත්තමක් සාදමු, එය ක්ලික් කළ විට අපගේ ගුණාංගය වෙනස් වනු ඇත:
<template>
{{ text }}
<button @click="change">text</button>
</template>
දැන් අපි ක්ලික් කිරීම මත ක්රියාත්මක වන බොත්තම මත ක්ලික් කිරීම මත ක්රියාත්මක වන සහ ගුණාංගය වෙනස් කරන ක්රමය ලියමු:
methods: {
change: function() {
this.text = 'yyy';
}
}
සියලුම කේතය එකට එකතු කර බොත්තම ක්ලික් කළහොත් - තිරය මත ඇති පෙළ ප්රතික්රියාශීලීව වෙනත් එකකට වෙනස් වේ.
text ගුණාංගය ලබා දී ඇත. මෙම ගුණාංගයේ අන්තර්ගතය
යම් ඡේදයක යොදා පෙන්වන්න.
බොත්තමක් ලබා දී ඇත. ක්ලික් කිරීම මත
මෙම බොත්තම මත ක්ලික් කිරීමෙන් text ගුණාංගයේ අගය
ප්රතික්රියාශීලීව වෙනත් එකකට වෙනස් වන පරිදි සකසන්න.
බොත්තම් දෙකක් ලබා දී ඇත. පළමු බොත්තම
ක්ලික් කළ විට text ගුණාංගයේ අගය
ප්රතික්රියාශීලීව එක් අගයකට වෙනස් වන පරිදිත්,
දෙවැන්න ක්ලික් කළ විට - වෙනත් අගයකට වෙනස් වන පරිදිත් සකසන්න.
