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

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

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

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

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

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

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

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

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

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

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

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

cssp.hidden {
  display: none;
}