การวนลูปอาร์เรย์ใน 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