v-forで配列データを繰り返す(ループ)

v-forディレクティブを繰り返して(ループ)使用します。

v-forディレクティブではsites in sites形式の特別な構文が必要です。sitesはソースデータ配列であり、siteは配列要素の反復のエイリアスです。

v-forはデータを配列にバインドしてリストをレンダリングできます。

v-for ディレクティブ

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Ceodata' },
      { name: 'Google' },
      { name: 'Yahoo' }
    ]
  }
})
</script>

テンプレートでv-forを使用します。

<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Ceodata' },
      { name: 'Google' },
      { name: 'Yahoo' }
    ]
  }
})
</script>

v-forでオブジェクトを繰り返す(ループ)

v-forはオブジェクトのプロパティでデータを繰り返す(ループ)ことができます。

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Florian Studio',
      url: 'http://www.ceodata.com',
      slogan: 'Tech Power！'
    }
  }
})
</script>

key属性で2つ目の引数を指定します。

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Florian Studio',
      url: 'http://www.ceodata.com',
      slogan: 'Tech Power！'
    }
  }
})
</script>

3つ目の引数はインデックス(index)です。

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'Florian Studio',
      url: 'http://www.ceodata.com',
      slogan: 'Tech Power！'
    }
  }
})
</script>

v-forで整数を繰り返す(ループ)

v-forは整数を繰り返す(ループ)ことができます。

v-for
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app'
})
</script>