Vue.jsのv-forを使ったリスト表示の簡単な例です。

前はv-repeatがあった気がしますが、いつの間にかなくなっているみたいです。

デモサイト

サンプル1

HTMLで「v-for=”list in lists”」と指定し、{{list}}で呼び出しています。

<div id="demo1">
  <ul>
    <li v-for="list in lists">{{list}}</li>
  </ul>
</div>

Vue.jsはこのように書いています。

new Vue({
  el: '#demo1',
  data: {
    lists: [
      'りんご',
      'バナナ',
      'パイナップル',
      'スイカ',
      'いちご'
    ]
  }
});

サンプル2

ちょっと違う書き方。

<div id="demo2" class="section">
  <ul>
    <li v-for="list in lists">{{$index}} - {{list.fruit}}</li>
  </ul>
</div>

v-for内では配列の番号を持っていて$indexで参照できるようです。
これはサンプル1の書き方でも同様。

new Vue({
  el: '#demo2',
  data: {
    lists: [
      {fruit: 'りんご'},
      {fruit: 'バナナ'},
      {fruit: 'パイナップル'},
      {fruit: 'スイカ'},
      {fruit: 'いちご'}
    ]
  }
});

簡単な例ですが、今度はv-forを使っていろいろやってみます。