වියු වීදුරුව තුළ සිදුවීමක් මත පෝරම දත්ත ලබා ගැනීම

අපට බොත්තමක් සහ අංකයක් ඇතුළත් කළ හැකි ආදාන ක්ෂේත්‍රයක් ඇතැයි සිතමු. බොත්තම එබූ විට, ආදාන ක්ෂේත්‍රයට ඇතුළත් කළ සංඛ්‍යාවේ වර්ගය අපි ප්‍රතිදානය කරමු. අපි ක්‍රියාත්මක කිරීම ආරම්භ කරමු.

ගැටළුව විසඳීම සඳහා අපට ගුණාංග දෙකක් අවශ්‍ය වනු ඇත. num ගුණාංගය ආදාන ක්ෂේත්‍රයට දත්ත ඇතුළත් කරන විට වෙනස් වනු ඇත, සහ res ගුණාංගය තුළ අපි වර්ග කිරීමේ ප්‍රතිඵලය ලියන්නෙමු:

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

දැන් අපි ආදාන ක්ෂේත්‍රයක් සාදා, එයට num ගුණාංගය බැඳීම, බොත්තමක් සාදා, එය මත ක්ලික් කළ විට calc ක්‍රමය ක්‍රියාත්මක වන පරිදි සකස් කිරීම, සහ ප්‍රතිඵලය ප්‍රදර්ශනය කිරීම සඳහා ඡේදයක් ද සාදමු:

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">වැඩ</button>
</template>

calc ක්‍රමයේ ක්‍රියාත්මක කිරීම අපි ලියමු:

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

එවිට, calc ක්‍රමය ක්‍රියාත්මක වූ විගස (මෙය සිදුවන්නේ බොත්තම එබූ විට), res ගුණාංගයට ප්‍රතිඵලය ලියා ඇති අතර, එම සමයේම අපගේ ඡේදය තුළ ද ප්‍රදර්ශනය වේ.