Vue တွင် data မှတစ်ဆင့် CSS classes များ

CSS classes များကို data object ၏ properties များ၏တန်ဖိုးပေါ် မူတည်၍ element သို့ ထည့်ပေးနိုင်ပါသည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် အောက်ပါ properties များရှိသည်ဆိုပါစို့။

data() {
	return {
		isActive: true,
		hasError: true,
	}
}

ကျွန်ုပ်တို့၏ properties များ၏တန်ဖိုးပေါ် မူတည်၍ CSS classes များကို element သို့ ထည့်ကြပါစို့။

<template>
	<p :class="{active: isActive, error: hasError}">
		text
	</p>
</template>

အောက်ပါ properties များကို ပေးထားသည်။

data() {
	return {
		isValid: true,
		isDisabled: true,
	}
}

ဤ properties များ၏တန်ဖိုးများပေါ် မူတည်၍ ၎င်းတို့နှင့်သက်ဆိုင်ရာ CSS classes များကို tag ထဲသို့ ထည့်သွင်းနိုင်ရန် ပြုလုပ်ပါ။