List Rendering in Vue.js
From the Vue.js cheat sheet · Directives · verified Jul 2026
List Rendering
v-for directive for rendering lists
vue
<!-- Array iteration (Vue 2 & 3) -->
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
<!-- With index -->
<li v-for="(item, index) in items" :key="item.id">
{{ index }}: {{ item.text }}
</li>
<!-- Object iteration -->
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>💡 Always use :key with v-for for efficient updates
⚡ Use stable, unique IDs for keys, not array indexes
📌 Vue 3 has full array reactivity, Vue 2 has limitations
🔥 v-for can iterate arrays, objects, ranges, and components
Continue with Vue.js
Save the full cheat sheet or work through every related task.