การวนลูปอาร์เรย์ใน Vue

Vue ช่วยให้สร้างแท็กในรูปแบบลูป ทำได้โดยใช้คำสั่งพิเศษ v-for ลองมาดูว่า มันทำงานอย่างไรกับอาร์เรย์ เรามาสร้างอาร์เรย์ต่อไปนี้:

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

ลองแสดงแต่ละองค์ประกอบ ของอาร์เรย์นี้ในย่อหน้าแยกกัน เริ่มต้นด้วยการสร้างย่อหน้า ในส่วนเทมเพลต:

App.vue<template>
  <p></p>
</template>

ตอนนี้ให้เขียนคำสั่ง v-for ให้กับย่อหน้าของเรา ค่าของคำสั่งนี้ควรระบุ ชื่อของอาร์เรย์ที่จะวนลูปและ ตัวแปรที่จะรับค่าของแต่ละองค์ประกอบ ของอาร์เรย์นี้ตามลำดับ ในกรณีของเรา ชื่อ อาร์เรย์คือ arr, และสำหรับตัวแปร เราจะตั้งชื่อว่า elem:

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

ผลลัพธ์คือ ย่อหน้าของเราจะถูกทำซ้ำ ตามจำนวนองค์ประกอบ ในอาร์เรย์ของเรา ลองแสดง องค์ประกอบที่กำลังวนลูปในข้อความ ของย่อหน้าเรา:

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

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

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

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