Vue.js
Rendu de la liste

Utilisation de base

Une liste peut être rendue en utilisant la directive v-for . La syntaxe requiert que vous spécifiiez le tableau source sur lequel effectuer une itération, et un alias qui sera utilisé pour référencer chaque élément de l'itération. Dans l'exemple suivant, nous utilisons des items tant que tableau source et item tant qu'alias pour chaque élément.

HTML

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

Scénario

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

Vous pouvez voir une démo qui fonctionne ici .

Ne rendre que les éléments HTML

Dans cet exemple, affichera cinq balises <li>

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

Liste de compte à rebours

<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/

Itération sur un objet

v-for peut être utilisé pour itérer sur un objet keys (et des valeurs):

HTML:

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

Scénario:

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