Vue ဖရိန်းဝပ်ခ်တွင် တုံ့ပြန်မှု

data ထဲမှ မည်သည့်ဒေတာပြောင်းလဲမှုမဆို စာမျက်နှ်ပေါ်ရှိ ထိုဒေတာများ၏ ဖော်ပြချက်ကို ချက်ချင်းပြောင်းလဲစေသည်။ Vue ၏ ဤအပြုအမူကို တုံ့ပြန်မှု ဟုခေါ်သည်။

လက်တွေ့စမ်းကြည့်ပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ property တစ်ခုရှိသည်ဆိုပါစို့။

javascriptdata() {
  return {
    text: 'xxx',
  }
}

ဤ property ၏တန်ဖိုးကို ထုတ်ပြကြမည်။

App.vue<template>
  {{ text }}
</template>

ခလုတ်တစ်ခုလုပ်ပြီး ၎င်းကိုနှိပ်လိုက်သည့်အခါ ကျွန်ုပ်တို့၏ property ပြောင်းလဲသွားစေမည်။

App.vue<template>
  {{ text }}
  <button @click="change">text</button>
</template>

အခု ခလုတ်ကိုနှိပ်လိုက်သည့်အခါခေါ်မည့် method ကိုရေးကြပြီး property ကို ပြောင်းလဲပစ်မည်။

App.vuemethods: {
  change: function() {
    this.text = 'yyy';
  }
}

ကုဒ်အားလုံးကိုအတူတကွစုစည်းပြီး ခလုတ်ကိုနှိပ်လျှင် - စခရင်ပေါ်ရှိ စာသားသည် တုံ့ပြန်၍ အခြားတစ်ခုသို့ပြောင်းသွားလိမ့်မည်။