වියු වීදුරුව තුළ සිදුවීමක් මත පෝරම දත්ත ලබා ගැනීම
අපට බොත්තමක් සහ අංකයක් ඇතුළත් කළ හැකි ආදාන ක්ෂේත්රයක් ඇතැයි සිතමු. බොත්තම එබූ විට, ආදාන ක්ෂේත්රයට ඇතුළත් කළ සංඛ්යාවේ වර්ගය අපි ප්රතිදානය කරමු. අපි ක්රියාත්මක කිරීම ආරම්භ කරමු.
ගැටළුව විසඳීම සඳහා අපට ගුණාංග දෙකක් අවශ්ය වනු ඇත. num ගුණාංගය
ආදාන ක්ෂේත්රයට දත්ත ඇතුළත් කරන විට වෙනස් වනු ඇත, සහ res ගුණාංගය තුළ
අපි වර්ග කිරීමේ ප්රතිඵලය ලියන්නෙමු:
data() {
return {
num: 0,
res: 0
}
}
දැන් අපි ආදාන ක්ෂේත්රයක් සාදා, එයට num ගුණාංගය බැඳීම, බොත්තමක් සාදා,
එය මත ක්ලික් කළ විට calc ක්රමය ක්රියාත්මක වන පරිදි සකස් කිරීම,
සහ ප්රතිඵලය ප්රදර්ශනය කිරීම සඳහා ඡේදයක් ද සාදමු:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">වැඩ</button>
</template>
calc ක්රමයේ ක්රියාත්මක කිරීම අපි ලියමු:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
එවිට, calc ක්රමය ක්රියාත්මක වූ විගස (මෙය සිදුවන්නේ බොත්තම එබූ විට),
res ගුණාංගයට ප්රතිඵලය ලියා ඇති අතර, එම සමයේම අපගේ ඡේදය තුළ ද ප්රදර්ශනය වේ.
ආදාන ක්ෂේත්රයක් ඇත. බොත්තමක් ඇත. ඡේදයක් ඇත. ආදාන ක්ෂේත්රයට අංකයක් ඇතුළත් කරනු ලැබේ. බොත්තම එබූ විට ඡේදය තුළ එම සංඛ්යාවේ වර්ගමූලය පෙනෙන පරිදි සකසන්න.
ආදාන ක්ෂේත්ර දෙකක් ඇත. බොත්තමක් ඇත. ඡේදයක් ඇත. එක් එක් ආදාන ක්ෂේත්රයට සංඛ්යා ඇතුළත් කරනු ලැබේ. බොත්තම එබූ විට ඡේදය තුළ මෙම සංඛ්යාවල එකතුව පෙන්වන පරිදි සකසන්න.
ආදාන ක්ෂේත්ර දෙකක් ඇත. බොත්තමක් ඇත. එක් එක් ආදාන ක්ෂේත්රයට යම් පෙළක් ඇතුළත් කරනු ලැබේ. බොත්තම එබූ විට පළමු ආදාන ක්ෂේත්රයේ පෙළ දෙවැන්නේ ද, දෙවන ආදාන ක්ෂේත්රයේ පෙළ පළමු එකේ ද පෙනෙන පරිදි සකසන්න.
ආදාන ක්ෂේත්රයක්, 3 ඡේද සහ බොත්තමක් ඇත. ආදාන ක්ෂේත්රයට
පරිශීලකයාගේ මුළු නම හිස්තැනකින් වෙන් කර ඇතුළත් කරනු ලැබේ. බොත්තම එබූ විට,
පළමු ඡේදය තුළ පරිශීලකයාගේ අවසන් නම, දෙවැන්න තුළ - මුල් නම,
තෙවැන්න තුළ - පියාගේ නම පෙන්වන පරිදි සකසන්න.
