Vue.js List Rendering Basic Usage

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

A list can be rendered using the v-for directive. The syntax requires that you specify the source array to iterate on, and an alias that will be used to reference each item in the iteration. In the following example we use items as the source array, and item as the alias for each item.

HTML

<div id="app">
  <h1>My List</h1>
  <table>
    <tr v-for="item in items">
      <td>{{item}}</td>
    </tr>
  </table>
</div>

Script

new Vue({
  el: '#app',
  data: {
    items: ['item 1', 'item 2', 'item 3']
  }
})

You can view a working demo here.



Got any Vue.js Question?