「Vue.js」v-for文でループを利用する方法

2020年9月14日

構文

<ul id="example">
    <li v-for="(item, index) in items">
        {{parentMessage}} - {{index}} - {{item.message}}
    </li>
</ul>

サンプルコード

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

実行結果
1.Yahoo
2.Google
3.Facebook