v-for
Updated on Sep 5, 2025 2 minutes to readThe v-for directive renders a list of elements by iterating over an array or object.
It takes a value and an alias, and repeats the element for each item in the collection. You can also access the index or key of each item.
• Example
<div id="app">
<h3>Array Example</h3>
<ul>
<li v-for="(item, index) in ['Apple', 'Banana', 'Cherry']" :key="index">
{{ index }}: {{ item }}
</li>
</ul>
<!-- Renders:
<ul>
<li>0: Apple</li>
<li>1: Banana</li>
<li>2: Cherry</li>
</ul>
-->
<h3>Object Example</h3>
<ul>
<li v-for="(value, key) in { name: 'Alice', age: 25 }" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
<!-- Renders:
<ul>
<li>name: Alice</li>
<li>age: 25</li>
</ul>
-->
</div>
🔽 Show more