🟢 Lesson 07 — Class & Style Binding

1. :class — Object Syntax

{ 'class-name': condition } — condition true ဆိုမှ class ထည့်မယ်

<p :class="{ 'text-bold': isBold, 'text-red': isRed }">Text</p>

data() {
  return { isBold: false, isRed: false }
}

2. :class — Array Syntax

Array ထဲ class names တွေ ထည့်လို့ရတယ် — object နဲ့ ရောသုံးလည်းရ

<p :class="[baseClass, activeClass, { 'text-bold': isBold }]">

data() {
  return {
    baseClass: 'text-large',
    activeClass: 'text-green'
  }
}

3. :class — Computed (Best Practice)

Complex class logic ကို computed ထဲ ထည့်ပြီး template ကို သပ်ရပ်အောင် လုပ်

computed: {
  cardClasses() {
    return {
      'card': true,
      'active':  this.status === 'active',
      'error':   this.status === 'error',
      'warning': this.status === 'warning'
    }
  }
}

<div :class="cardClasses"> ← template သပ်ရပ်တယ်

4. :style — Object Syntax

CSS properties တွေကို camelCase နဲ့ data အဖြစ် bind လုပ်တယ်

<p :style="{ color: textColor, fontSize: size + 'px', fontWeight: 'bold' }">

data() {
  return { textColor: '#42b883', size: 18 }
}

5. :style — Multiple + Dynamic Box

<!-- Array of style objects -->
<div :style="[baseStyles, extraStyles]">

<!-- Inline dynamic -->
<div :style="{ background: color, transform: 'rotate(' + deg + 'deg)' }">

6. Real Use Case — Tab Navigation

7. Dynamic Button Classes