Conditional and List Rendering

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

v-if နှင့် v-show ကိုရွေးချယ်ရန်
v-for တွင် stable key ထည့်ရန်

ရိုးရိုးလေး ရှင်းပြမယ်

v-if သည် condition false ဖြစ်လျှင် element ကို DOM မှဖယ်ရှားသည်။ v-show သည် CSS display ကိုသာပြောင်းလဲသောကြောင့် မကြာခဏ toggle လုပ်သည့် UI တွင်သင့်တော်သည်။ v-for list တိုင်းတွင် unique :key ထည့်ပါ။

vue

<script setup>
const tasks = [
  { id: 1, title: 'Read Vue guide', done: true },
  { id: 2, title: 'Build a component', done: false }
]
</script>

<template>
  <p v-if="tasks.length === 0">No tasks</p>
  <ul v-else>
    <li v-for="task in tasks" :key="task.id">
      {{ task.done ? '✓' : '○' }} {{ task.title }}
    </li>
  </ul>
</template>

You should see

✓ Read Vue guide
○ Build a component

လက်တွေ့စမ်းကြည့်ရန်

Products list ကို stock > 0 ဖြစ်သော item များသာပြပြီး unique id ကို key အဖြစ်သုံးပါ။

List Rendering — Vue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

List index ကို key အဖြစ်သုံးခြင်း
Element တစ်ခုတည်းပေါ်တွင် v-if နှင့် v-for ကိုအတူသုံးခြင်း

လေ့ကျင့်ခန်း

Products list ကို stock > 0 ဖြစ်သော item များသာပြပြီး unique id ကို key အဖြစ်သုံးပါ။

You'll know it worked when: ✓ Read Vue guide ○ Build a component