Vue တွင် style attribute ဖြင့် စတိုင်ထည့်ခြင်း

CSS စတိုင်များကို တိုက်ရိုက် style attribute အားဖြင့် ပေါင်းထည့်နိုင်ပါသည်။ ထိုသို့ပြုလုပ်ရန် ဤ attribute ထဲသို့ object တစ်ခုကို ပေးပို့ရပြီး၊ ထို object ၏ keys များသည် လိုချင်သော CSS properties များ ဖြစ်ရမည်၊ ထို့အပြင် ၎င်း CSS properties များ၏ တန်ဖိုးများသည် ထို object ၏ values များ ဖြစ်ရပါမည်။

ဥပမာအနေဖြင့် မည်သည့်စာပိုဒ်ကိုမဆို အနီရောင်အဖြစ် ခြယ်လှယ်ပြီး အစိမ်းရောင် အနားသတ်တစ်ခုကို ပေါင်းထည့်ကြည့်ရအောင်။

App.vue<template>
  <p :style="{color: 'red', border: '1px solid green'}">
    text
  </p>
</template>

ယခု အနားသတ်အစား ၎င်းအား font-size ကို 30px အဖြစ် သတ်မှတ်ကြည့်ကြစို့။ Object ထဲတွင် hyphen ပါသည့် key များ မရှိနိုင်သောကြောင့် ကျွန်ုပ်တို့သည် ၎င်းကို ကိုးကွက်များဖြင့် ခံရပါမည်။

App.vue<template>
  <p :style="{color: 'red', 'font-size': '30px'}">
    text
  </p>
</template>

font-size အစား fontSize ဟု ရေးသားနိုင်ပြီး - ထိုသို့လည်း အလုပ်ဖြစ်ပါလိမ့်မည်။

App.vue<template>
  <p :style="{color: 'red', fontSize: '30px'}">
    text
  </p>
</template>