🟢 Lesson 02 — Directives

1. v-if / v-else-if / v-else

condition မှန်မှသာ DOM ထဲ ထည့်တယ် (element ကို render လုပ်/မလုပ် ဆုံးဖြတ်)

<p v-if="score >= 80">Grade A 🏆</p>
<p v-else-if="score >= 60">Grade B ✅</p>
<p v-else>Grade C ❌</p>

2. v-show

v-if နဲ့ ကွာချက် — v-show က element ကို DOM ထဲ ထားတယ်၊ display:none ပဲ လုပ်တယ်

<p v-show="isVisible">I can toggle!</p>

<!-- v-if  → DOM ထဲ ဝင်/မဝင် (expensive to toggle) -->
<!-- v-show → display show/hide    (cheap to toggle) -->

3. v-for — Loop through Array

array/object တွေ ပေါ်မှာ loop ပတ်ပြီး element တွေ ဖန်တီးတယ်

<li v-for="(item, index) in fruits" :key="index">
  {{ index + 1 }}. {{ item }}
</li>

4. v-for — Array of Objects

<tr v-for="user in users" :key="user.id">
  <td>{{ user.name }}</td>
  <td>{{ user.age }}</td>
</tr>

5. v-for — Object Properties

<li v-for="(value, key) in profile" :key="key">
  {{ key }}: {{ value }}
</li>