Vue.jsのv-for【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのv-forについて、簡単に解説していきます。

v-forとは

Vue.jsのv-forで繰返処理ができます。

具体的にはv-forの要素をループ回数だけ作れます。

<div id="app">
  <ol>
    <li v-for="language in languages">
      {{ language.name }}
    </li>
  </ol>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    languages: [
      { name: 'PHP' },
      { name: 'Ruby' },
      { name: 'Python' }
    ]
  }
})
</script>

上記のコードでは、languagesプロパティの要素の数だけli要素を作っています。

配列のインデックスも取れる

v-forでは配列のインデックスも取れます。

具体的には、現在のアイテムの二つ目の引数で取ることが可能です。

<ul id="app">
  <li v-for="(language, index) in languages">
    {{ index }} - {{ language.name }}
  </li>
</ul>

<script>
var app = new Vue({
  el: '#app',
  data: {
    languages: [
      { name: 'PHP' },
      { name: 'Ruby' },
      { name: 'Python' },
    ]
  }
})
</script>

上記のコードの例では、appのlanguageプロパティのnameの値とともにインデックスも出力しています。

オブジェクトも回せる

v-forでは配列だけでなくオブジェクトも回せます。

オブジェクトの場合、値とキー、インデックスの3つを取得できます。

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

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '田中太郎',
      age: '22',
      gender: '男'
    }
  }
})
</script>

上記の例では、objectの要素の数だけデータとともにdiv要素を出力しています。