1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#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」でリスト表示
結果はしたのようになる

image.png

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?