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

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

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

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

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

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

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

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

အောက်ပါ array ကို ပေးထားပါသည်:

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

ဤ array ကို loop ဖြင့် ဖြတ်သန်းပြီး array ၏ အပြုသဘောဆောင်သော element များကိုသာ ပြသပါ။