List Rendering

Vue has many directives. One of most useful and widely used, is the v-for directive, which is used to display a list of items using data from an array or object. It can also be used with a number to repeatly render an element.

v-for

The v-for directive allows for a section of a template to be rendered for every data item in an array or object. The v-for directive does require a special syntax in the form of alias in expression, where alias is the current element being iterated on.

const app = Vue.createApp({
  data: function () {
    return {
      items: ['Milk', 'Eggs', 'Bread']
    }
  }
})

const vm = app.mount('#list')

<ul id="list">
  <li v-for="item in items">
    {{ item }}
  </li>
</ul>

Try it yourself on CodePen

Alternatively, you can also specify an alias for the index (array) or key (object).

const app = Vue.createApp({
  data: function () {
    return {
      stats: {
        health: 50,
        strength: 85,
        stanima: 35 
      }
    }
  }
})

const vm = app.mount('#list')

<ul id="list">
  <li v-for="(value, stat) in stats">
    {{ stat }}: {{ value }}
  </li>
</ul>

Try it yourself on CodePen

Repeatedly Render

If you need repeatedly render a block, without an array or object, the v-for can be used to repeat a template block a specified number of times, as in the example below.

const app = Vue.createApp({})
const vm = app.mount('#app')

<ul id="app">
  <p v-for="i in 3">Hip Hip Hurray!</p>
</ul>