Vue တွင် CSS Class အရာဝတ္ထုများ

CSS class များကို အရာဝတ္ထုများအတွင်း၌လည်း သိမ်းဆည်းထားနိုင်သည်။ ထိုသို့ဖြစ်လျှင် class အမည်များသည် အရာဝတ္ထု၏ key များဖြစ်လာပြီး၊ အရာဝတ္ထု၏ element များသည် logical တန်ဖိုးများဖြစ်လိမ့်မည်။ တန်ဖိုးသည် true ဖြစ်ပါက၊ ထို class ကို element သို့ ပေါင်းထည့်ပေးပြီး၊ false ဖြစ်ပါက၊ ပေါင်းထည့်မည်မဟုတ်ပါ။

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

data() {
	return {
		obj: {
			active: true,
			valid:  false,
		},
	}
}

ဤအရာဝတ္ထုကို tag တစ်ခုနှင့် ချိတ်ဆက်လိုက်ပါ-

<template>
	<p :class="obj">text</p>
</template>

အောက်ပါ CSS class အရာဝတ္ထုကို ပေးထားသည်-

data() {
	return {
		obj: {
			done: true,
			selected:  false,
		},
	}
}

ဤ class များကို မည်သည့် tag နှင့်မဆို အသုံးပြုပါ။ မည်သည့် class များအသုံးပြုခဲ့ပြီး၊ မည်သည်တို့အသုံးမပြုခဲ့ကြောင်း စစ်ဆေးပါ။