Vue.js
Beginner
1 min read
v-for List Rendering
Example
<template>
<!-- Array iteration -->
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} — {{ user.email }}
</li>
</ul>
<!-- Destructured + index -->
<ol>
<li v-for="({ title, done }, i) in tasks" :key="i">
{{ i + 1 }}. <s v-if="done">{{ title }}</s>
<span v-else>{{ title }}</span>
</li>
</ol>
<!-- Object iteration -->
<dl>
<template v-for="(value, key) in config" :key="key">
<dt>{{ key }}</dt><dd>{{ value }}</dd>
</template>
</dl>
<!-- Integer range -->
<span v-for="n in 5" :key="n">{{ n }} </span>
<!-- v-for + v-if via wrapper template -->
<ul>
<template v-for="item in items" :key="item.id">
<li v-if="item.visible">{{ item.label }}</li>
</template>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const users = ref([{ id: 1, name: 'Alice', email: 'alice@x.com' }]);
const tasks = ref([{ title: 'Buy milk', done: true }]);
const config = ref({ theme: 'dark', lang: 'en' });
const items = ref([{ id: 1, label: 'A', visible: true }]);
</script>