Vue.js
Список рендеринга

Основное использование

Список может отображаться с помощью директивы v-for . Синтаксис требует, чтобы вы указывали исходный массив для итерации и псевдоним, который будет использоваться для ссылки на каждый элемент в итерации. В следующем примере мы используем items как исходный массив, а item как псевдоним для каждого элемента.

HTML

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

скрипт

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

Вы можете просмотреть рабочую демку здесь .

Отображать только элементы HTML

В этом примере будет отображаться пять тегов <li>

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

Список обратного отсчета свиней

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

Итерация по объекту

v-for может использоваться для итерации над объектными ключами (и значениями):

HTML:

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

Автор сценария:

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