Vue.jsの繰り返しレンダリング(v-for)のまとめ

v-for

繰り返し描画ができます。
indexを引数に取ることもできます。

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{fruit}}</li>
  </ul>

  <ul>
      <li v-for="(fruit, index) in fruits">{{index}}{{fruit}}</li>
    </ul>

  <ul>
    <template v-for="fruit in fruits">
      <li>{{fruit}}</li>
      <hr>
    </template>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      fruits: ['りんご', 'バナナ', 'ぶどう']
    }
  })
</script>

オブジェクトで指定する場合

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

<script>
  new Vue({
    el: "#app",
    data: {
      object: {
        firstName: '太郎',
        lastName: '田中',
        age: 20
      }
    }
  })
</script>

v-forには必ずkeyをつけるようにしましょう

vueはDOMの移動を最低限に抑えるため、keyを使用しないと意図しない動きになることがあります。
key属性を外して、inputに何らか入力して、削除ボタンを押してみるとわかると思います。

<div id="app">
  <ul>
    <div v-for="fruit in fruits" :key="fruit">
      <p>{{fruit}}</p>
      <input />
    </div>
  </ul>
  <button @click="remove">先頭を削除</button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      fruits: ['りんご', 'バナナ', 'ぶどう']
    },
    methods: {
      remove: function () {
        this.fruits.shift()
      }
    }
  })
</script>