v-for を活用して配列をレンダリングする

参考コード

  • v-for を活用することで、配列を効率的にレンダリングすることができる
  • 繰り返し同じような HTML タグを書く際に便利！
  • v-for="配列の要素が入る変数 in 配列を持つreactiveな変数" で使える
  • 例えば以下コードであれば、data にある members という配列に一個一個アクセスして、member という変数にその要素が入ってくる
  • これを {{memebr}} という形で使えばいい
  • div を何回も手で書く必要がなくて便利！
App.vue
<template>
  <div>
    <h2>{{title}}</h2>
    <div :key="member" v-for="member in members">{{member}}</div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      title: "メンバーリスト",
      members: ["中西", "佐々木", "鈴木", "木村"]
    };
  }
};
</script>

<style>
</style>