Vue တွင် CSS အတန်းများနှင့် အရာဝတ္ထု၏ တုံ့ပြန်မှု

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

data() {
	return {
		styles: {
			done: false,
		},
	}
}

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

<template>
	<p :class="styles">စာသား</p>
</template>

done အတန်း ပါရှိခြင်းသည် tag ၏စာသားကို ဖြတ်ကနဲ့မျဉ်းစောင်းဖြစ်စေပါစေ။

p.done {
	text-decoration: line-through;
}

အတန်းများပါသော အရာဝတ္ထုကို ပြောင်းလဲပေးမည့် ခလုတ်တစ်ခုကို ဖန်တီးပါမည်။ ၎င်းသည် done အတန်းကို ထည့်သွင်းပေးပါမည်။

<template>
	<button @click="setDone">ဝှက်</button>
</template>

သက်ဆိုင်ရာ method ကို ရေးကြပါစို့။

methods: {
	setDone: function() {
		this.styles.done = true;
	}
}

အောက်ပါ CSS အတန်းများပါသော အရာဝတ္ထု ရှိပါသည်။

data() {
	return {
		obj: {
			hidden: true,
		},
	}
}

ဤအတန်း ပါရှိခြင်းသည် အစိတ်အပိုင်းကို ဝှက်ထားပါစေ။

p.hidden {
	display: none;
}

အတန်းများပါသော အရာဝတ္ထုကို စာသားပါသော tag တစ်ခုခုနှင့် အသုံးပြုပါ။

အစိတ်အပိုင်းကို ပြသပေးမည့် ခလုတ်တစ်ခုကို ဖန်တီးပါ။

အစိတ်အပိုင်းကို ဝှက်ပေးမည့် ခလုတ်တစ်ခုကို ဖန်တီးပါ။

အစိတ်အပိုင်းကို toggle လုပ်ပေးမည့် (ဝှက်ထားလျှင် ပြမည်၊ �ြထားလျှင် ဝှက်မည်) ခလုတ်တစ်ခုကို ဖန်တီးပါ။