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 लिस्ट के रूप में प्रदर्शित करें।