Vue တွင် သတ်မှတ်ချက်အရ ပြသခြင်း

နောက်ထပ်လေ့လာရမည့် directive က v-if ဖြစ်သည်။ ၎င်းဖြင့် element များကို ပြသနိုင်၊ ဝှက်ထားနိုင်သည်။ ဤ directive ၏ အလုပ်လုပ်ပုံမှာ ၎င်းသည် data object ၏ မည်သည့် property ကိုမဆို parameter အဖြစ်လက်ခံသည်။ အကယ်၍ ထို property ၏ တန်ဖိုးသည် true ဖြစ်လျှင် - element ကိုပြမည်၊ false ဖြစ်လျှင် - ဝှက်ထားမည်။

ဥပမာကို ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် v-if attribute ပါသည့် အတိုချုပ် (paragraph) တစ်ခုရှိတယ်ဆိုပါစို့။ ထို attribute ၏ တန်ဖိုးအဖြစ် မြင်နိုင်မှု (visible) property ကို သတ်မှတ်မည်။ ဤသို့ဖြစ်သည်။

<template>
	<p v-if="visible">စာသား</p>
</template>

ကျွန်ုပ်တို့၏ property တန်ဖိုးကို true အဖြစ် သတ်မှတ်ကြပါစို့။ ဤအခြေအနေတွင် အတိုချုပ်ကို ပြသမည်။

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

သို့သော် အကယ်၍ visible ကို တန်ဖိုး false အဖြစ် သတ်မှတ်လိုက်လျှင်၊ အတိုချုပ်ကို ဝှက်ထားမည်။

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

data တွင် visible property ကို သိမ်းဆည်းထားသည်ဆိုပါစို့။ သင့်တွင် အတိုချုပ် နှစ်ခုလည်း ရှိပါစေ။ ပထမအတိုချုပ်ကို visible property သည် true ဖြစ်လျှင် စက်ရှင်မျက်နှာပြင်တွင် ပြသပါ။ ဒုတိယအတိုချုပ်ကိုမူ ပြောင်းပြန်၊ visible property သည် false ဖြစ်လျှင် ပြသပါ။