Vue-এ অ্যারে ইটারেশন

Vue আপনাকে লুপে ট্যাগ তৈরি করতে দেয়। এটি একটি বিশেষ ডাইরেক্টিভ v-for ব্যবহার করে করা হয়। আসুন দেখি, এটি অ্যারের জন্য কীভাবে কাজ করে। এটি করতে নিম্নলিখিত অ্যারে তৈরি করা যাক:

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

আসুন এই অ্যারের প্রতিটি উপাদান একটি পৃথক প্যারাগ্রাফে আউটপুট করি। এটি করতে, ভিউতে প্রথমে একটি প্যারাগ্রাফ তৈরি করা যাক:

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

এখন আমাদের প্যারাগ্রাফে v-for ডাইরেক্টিভ লিখি। এই ডাইরেক্টিভের মান হিসাবে পুনরাবৃত্তি করা অ্যারের নাম এবং সেই পরিবর্তনশীল নির্দিষ্ট করা উচিত, যেখানে ক্রমানুসারে এই অ্যারের উপাদানগুলি পড়বে। আমাদের ক্ষেত্রে অ্যারের নাম হবে arr, এবং পরিবর্তনশীলের জন্য আমরা নাম elem দেব:

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

ফলস্বরূপ, আমাদের প্যারাগ্রাফ যতবার পুনরাবৃত্তি হবে যতগুলি উপাদান আমাদের অ্যারেতে আছে। আসুন পুনরাবৃত্তি করা উপাদানগুলি আমাদের প্যারাগ্রাফের টেক্সটে আউটপুট করি:

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

ধরুন data-এ নিম্নলিখিত অ্যারে সংরক্ষিত আছে:

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

এই অ্যারের প্রতিটি উপাদান নিজের div ট্যাগে আউটপুট করুন।

নিম্নলিখিত অ্যারে দেওয়া আছে:

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

এই অ্যারের প্রতিটি উপাদানের বর্গ নিজের div ট্যাগে আউটপুট করুন।

নিম্নলিখিত অ্যারে দেওয়া আছে:

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

এই অ্যারের উপাদানগুলি ul তালিকা আকারে আউটপুট করুন।