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

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

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

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

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

<template>
	{{ text }}
</template>

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

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

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

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

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

text property ကိုပေးထားသည်။ ဤ property ၏ အကြောင်းအရာကို စာပိုဒ်တစ်ခုခုတွင်ထုတ်ပြပါ။

ခလုတ်တစ်ခုကိုပေးထားသည်။ ဤခလုတ်ကိုနှိပ်လိုက်သည့်အခါ text property ၏တန်ဖိုးသည် တုံ့ပြန်၍ အခြားတစ်ခုသို့ပြောင်းသွားအောင် လုပ်ပါ။

ခလုတ်နှစ်ခုကိုပေးထားသည်။ ပထမခလုတ်ကိုနှိပ်လိုက်သည့်အခါ text property ၏တန်ဖိုးသည် တုံ့ပြန်၍ တန်ဖိုးတစ်ခုသို့ပြောင်းသွားပြီး ဒုတိယခလုတ်ကိုနှိပ်လျှင် - အခြားတစ်ခုသို့ပြောင်းသွားအောင် လုပ်ပါ။