Vue.js
Lijstweergave

Basisgebruik

Een lijst kan worden weergegeven met de v-for richtlijn. De syntaxis vereist dat u de bronarray opgeeft waarop moet worden herhaald, en een alias die zal worden gebruikt om naar elk item in de iteratie te verwijzen. In het volgende voorbeeld gebruiken we items als bronarray en item als alias voor elk 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']
  }
})

U kunt hier een werkende demo bekijken.

Geef alleen HTML-items weer

In dit voorbeeld worden vijf <li> -tags weergegeven

<ul id="render-sample">
  <li v-for="n in 5">
    Hello Loop
  </li>
</ul>

Pig countdown lijst

<ul>
  <li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and
</ul>

https://jsfiddle.net/gurghet/3jeyka22/

Iteratie over een object

v-for kan worden gebruikt voor het herhalen van een object (en waarden):

HTML:

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

Script:

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})