การวนลูปออบเจกต์ใน Vue
ออบเจกต์ก็สามารถวนลูปได้ด้วยคำสั่ง
v-for มาดูกันว่าทำได้อย่างไร
สมมติว่าเรามีออบเจกต์ต่อไปนี้:
data() {
return {
obj: {a: 1, b: 2, c: 3},
}
}
ลองวนลูปออบเจกต์นี้ และแสดงองค์ประกอบของมัน:
<template>
<p v-for="elem in obj">
{{ elem }}
</p>
</template>
คราวนี้ให้แสดงทั้งคีย์ และองค์ประกอบ:
<template>
<p v-for="(elem, key) in obj">
{{ key }} {{ elem }}
</p>
</template>
คราวนี้ให้แสดงหมายเลขลำดับ ขององค์ประกอบในออบเจกต์ด้วย:
<template>
<p v-for="(elem, key, index) in obj">
{{ index }}
{{ key }}
{{ elem }}
</p>
</template>
กำหนดออบเจกต์ต่อไปนี้:
{
user1: '100',
user2: '200',
user3: '300',
}
ใช้ v-for เพื่อแสดงบนหน้าจอดังต่อไปนี้:
<+html+>
- 100$
- 200$
- 300$
กำหนดออบเจกต์ต่อไปนี้:
{
user1: '100',
user2: '200',
user3: '300',
}
ใช้ v-for เพื่อแสดงบนหน้าจอดังต่อไปนี้:
<+html+>
- user1 - 100$
- user2 - 200$
- user3 - 300$
ปรับโจทย์ก่อนหน้าใหม่ เพื่อให้
ท้ายแต่ละ li มีหมายเลขลำดับ
ขององค์ประกอบในออบเจกต์ด้วย ดังนี้:
<ul>
<li>user1 - 100$ - 0</li>
<li>user2 - 200$ - 1</li>
<li>user3 - 300$ - 2</li>
</ul>
ปรับโจทย์ก่อนหน้าใหม่ เพื่อให้ หมายเลขเริ่มไม่จากศูนย์ แต่จากหนึ่ง ดังนี้:
<ul>
<li>user1 - 100$ - 1</li>
<li>user2 - 200$ - 2</li>
<li>user3 - 300$ - 3</li>
</ul>
