【Nuxt.js/Vue.js】 v-forの基本的文法

v-forの基本的文法

v-forとは

Vue.jsでのループをする方法です。
jqueryにおいての$eachあたります。

書き方

v-for="(item, index) in ループする要素" :key="キー"

itemはループで取得できる、要素の一つ
indexはループする要素のindex

<template>
  <div class="page">
    <ul>
      <li v-for="(item, index) in object" :key="index">
        {{ index }}. {{ item.artist }} :{{ item.title }} :{{ item.releaseDate }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      object: [
        {
          title: "Leave Home",
          artist: "ラモーンズ",
          releaseDate: "1977-01-10"
        },
        {
          title: "Ramones",
          artist: "ラモーンズ",
          releaseDate: "1976-04-23"
        }
      ]
    };
  }
};
</script>

解説

objectをv-forでループ
objectの「title」「artist」「releaseDate」でリスト表示
結果はしたのようになる

他にもv-forでは便利な書き方ができるようです。
わかり次第追記していこうとおもいます