อัปเดตล่าสุด Feb. 15, 2024
คำสั่ง v-for คือ หัวใจสำคัญในการสร้างหรือแสดงผลข้อมูลแบบ dynamic ภายใน Template ของ Vue 3 บทเรียนนี้จะพาไปเจาะลึกการใช้งาน เทคนิคขั้นสูง และแนวทางปฏิบัติที่ดี เพื่อใช้ v-for
ได้อย่างมั่นใจ
<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul></template><script setup>const items = [{ id: 1, name: "Item 1" },{ id: 2, name: "Item 2" },];</script>
คำอธิบาย
items
name
ของแต่ละ object1. ฟิลเตอร์สำหรับจำกัดข้อมูลที่แสดงด้วย filteredItems
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
2. คำสั่ง slot
ปรับแต่งส่วนภายใน
<template><ul><li v-for="item in items" :key="item.id"><slot :item="item" /></li></ul></template><script setup><slot :item="item" /></script>
3. การจัดการอินเด็กซ์โดยการใช้ $index
<li v-for="item in items" :key="item.id">{{ $index + 1 }}: {{ item.name }}</li>
4. การจัดการคีย์พิเศษ
<li v-for="(item, key) in uniqueItems" :key="key">{{ item.name }}</li>
key
เสมอโดยเฉพาะกับข้อมูลแบบ dynamicv-for
v-show
สำหรับการซ่อน/แสดง รวดเร็วกว่า v-for
v-for
อย่างละเอียด