Vue ရှိ loop များအတွင်း အခြေအနေများ

Loop များဖြင့် element များကို ဖြတ်သန်းသောအခါ အခြေအနေများကို ထပ်ဆင့်သတ်မှတ်နိုင်ပါသည်။ သို့သော် directives v-for နှင့် v-if ကို tag အမျိုးမျိုးတွင် ရေးရန်လိုအပ်သည်၊ မဟုတ်ပါက ပဋိပက္ခဖြစ်ပွားမည်။ Directives များအကြား ပဋိပက္ခမဖြစ်စေရန် directive v-for ကို tag template သို့ အသုံးပြုပြီး directive v-if ကိုမူ တိုက်ရိုက်ထည့်သွင်းမည့် tag သို့ အသုံးပြုပါသည်။

ဥပမာတစ်ခုအား ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့၌ အောက်ပါ array ရှိသည်ဆိုပါစို့:

javascriptdata() {
  return {
    arr: [1, 2, 3, 4, 5],
  }
}

ဤ array ကို loop ဖြင့် ဖြတ်သန်းကြည့်ပါမည်:

html<template>
  <ul>
    <li v-for="elem in arr">
      {{ elem }}
    </li>
  </ul>
</template>

ယခု ပြသမည့် element များအပေါ် အခြေအနေတစ်ခု ထပ်ဆင့်သတ်မှတ်ကြပါစို့:

html<template>
  <ul>
    <template v-for="elem in arr">
      <li v-if="elem % 2 === 0">
        {{ elem }}
      </li>
    </template>
  </ul>
</template>

javascriptdata() {
  return {
    items: [1, -2, 3, -4, 5],
  }
}