How do you render a list of items in Vue.js?

The v-for directive loops over an array (or object) to render one element per item.

<ul id="data">
  <li v-for="item in items">{{ item }}</li>
</ul>
<script>
Vue.createApp({
  data() {
    return { items: ["Hallo", "Welt", "!"] }
  }
}).mount('#data');
</script>

Output:

• Hallo
• Welt
• !

The item variable is available inside the element for each iteration.

Go deeper:

• List Rendering (Vue docs) — v-for with index, object iteration, and why a :key matters for stable updates.