Vue တွင် တုံ့ပြန်သော အခြေအနေ

အခြေအနေတစ်ခုသည် တုံ့ပြန်မှုရှိစေရန် ပြုလုပ်ကြပါစို့။ ဥပမာအားဖြင့်၊ ခလုတ်တစ်ခုကို နှိပ်လိုက်သည့်အခါ အဲလီမင့်တစ်ခု ပုန်းကွယ်သွားစေရန် ပြုလုပ်ကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ စာပိုဒ်တစ်ခု ရှိသည်ဆိုပါစို့။

<template>
	<p v-if="visible">text</p>
</template>

ကျွန်ုပ်တို့၏ စာပိုဒ်ကို ကနဦးတွင် ပြသထားစေရန် ပြုလုပ်ကြပါစို့။

data() {
	return {
		visible: true,
	}
}

ယခု ခလုတ်တစ်ခုကို ပြုလုပ်ကြပါစို့၊ ၎င်းကို နှိပ်လိုက်သည့်အခါ စာပိုဒ်သည် ပုန်းကွယ်သွားမည်ဖြစ်သည်။

<template>
	<button @click="hide">hide</button>
	<p v-if="visible">text</p>
</template>

�ျိတ်ဆက်ထားသော method သည် visible property ကို false အဖြစ်သို့ ပြောင်းလဲပစ်မည်ဖြစ်ပြီး၊ ဤနည်းဖြင့် ကျွန်ုပ်တို့၏ စာပိုဒ်ကို ပုန်းကွယ်သွားစေရန် ဖြစ်ပေါ်စေသည်။

methods: {
	hide: function() {
		this.visible = false;
	}
}

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

�ာပိုဒ်တစ်ခုနှင့် ခလုတ်နှစ်ခု ရှိသည်။ ပထမခလုတ်သည် စာပိုဒ်ကို ပြသပြီး၊ ဒုတိယခလုတ်သည် ၎င်းကို ပုန်းကွယ်စေသည် ဆိုပါစို့။

ယခင်ကိစ္စကို အောက်ပါအတိုင်း မွမ်းမံပါ။ စခရင်တွင် ခလုတ်များထဲမှ တစ်ခုသာ အမြဲမြင်နေရစေရန် ဖြစ်သည်။ စာပိုဒ်ပြသထားပါက၊ ပုန်းကွယ်ရန် ခလုတ်ကို ပြသပြီး၊ ပုန်းကွယ်ထားပါက ပြသရန် ခလုတ်ကို ပြသပါ။