Vue.js
Listen-Rendering

Grundlegende Verwendung

Eine Liste kann mit der v-for Direktive gerendert werden. Die Syntax erfordert, dass Sie das Quellenarray angeben, für das eine Iteration durchgeführt werden soll, sowie einen Alias, der zum Verweisen auf jedes Element in der Iteration verwendet wird. Im folgende Beispiel verwenden wir items als Quelle Array und item als Alias für jedes Element.

HTML

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

Skript

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

Sie können eine Arbeits Demo sehen hier .

Nur HTML-Elemente rendern

In diesem Beispiel werden fünf <li> -Tags gerendert

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

Schweine-Countdown-Liste

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

Iteration über ein Objekt

v-for kann zum Durchlaufen von Objektschlüsseln (und Werten) verwendet werden:

HTML:

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

Skript:

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