Vue တွင် Array များကို ဖြတ်သန်းခြင်း

Vue သည် tag များကို loop ဖြင့် ဖွဲ့စည်းခွင့်ပြုပါသည်။ ၄င်းကို အထူး directive ဖြစ်သော v-for ဖြင့် လုပ်ဆောင်နိုင်ပါသည်။ Array များအတွက် ၎င်း၏ အလုပ်လုပ်ပုံကို ကြည့်ရအောင်။ အောက်ပါ array ကို ဖန်တီးကြပါစို့။

data() {
	return {
		arr: ['a', 'b', 'c'],
	}
}

ဤ array ၏ element တစ်ခုစီကို သီးခြား paragraph တစ်ခုစီတွင် ထုတ်ပြကြပါစို့။ ထိုသို့ပြုလုပ်ရန် view တွင် ပထမဦးစွာ paragraph တစ်ခု ဖန်တီးပါမည်။

<template>
	<p></p>
</template>

ယခု ကျွန်ုပ်တို့၏ paragraph အား v-for directive ကို ရေးသားပါမည်။ ဤ directive ၏ တန်ဖိုးအဖြစ် ဖြတ်သန်းမည့် array ၏ အမည်နှင့် ထို array ၏ element များကို အစဉ်လိုက် လက်ခံရရှိမည့် variable ကို သတ်မှတ်ရပါမည်။ ကျွန်ုပ်တို့၏ ကိစ္စတွင် array အမည်မှာ arr ဖြစ်ပြီး၊ variable အတွက် အမည်ကို elem ဟု ပေးပါမည်။

<template>
	<p v-for="elem in arr"></p>
</template>

ရလဒ်အနေဖြင့် ကျွန်ုပ်တို့၏ paragraph သည် ကျွန်ုပ်တို့၏ array ထဲတွင် element မည်မျှရှိသည်ထိ ထိုအကြိမ်ရေ ပြန်လည်ပွားများသွားပါမည်။ ဖြတ်သန်းသော element များကို ကျွန်ုပ်တို့၏ paragraph များ၏ စာသားအတွင်း ထုတ်ပြကြပါစို့။

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

data တွင် အောက်ပါ array ကို သိမ်းဆည်းထားသည်ဆိုပါစို့။

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

ဤ array ၏ element တစ်ခုစီကို ၎င်း၏ ကိုယ်ပိုင် div tag ထဲတွင် ထုတ်ပြပါ။

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

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

ဤ array ၏ element တစ်ခုစီ၏ နှစ်ထပ်ကိန်းကို ၎င်း၏ ကိုယ်ပိုင် div tag ထဲတွင် ထုတ်ပြပါ။

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

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

ဤ array ၏ element များကို ul list အဖြစ် ထုတ်ပြပါ။