More than 3 years have passed since last update.

Vue.js~v-for~

Last updated at 2021-05-04Posted at 2021-05-04

#概要
JSでは、イベント(ユーザーがクリックしたときなど)に処理(イベントハンドラーと言います)が始まります。
その際に、クリックイベントを取得することにより実行することができました。Vue.jsでも記述は多少異なりますが仕組みは変わりません。
繰り返し処理についての記事です。

#繰り返し処理
Vue.jsでは、繰り返し処理の際に[v-for]を使用します。

#HTML

index.html

<ul>
  <li v-for="list in lists">{{ list }}</li>
</ul>

構文は以下のようになります。

v-for="仮変数 in 任意の配列"

配列listsから順に要素を取り出します。
マスタッシュ構文に変数listを格納します。
このlistの中にlistsの配列の中身がなくなるまで繰り返し処理されます。

#Vue

index.js

data:{
  lists:[
    'list1',
    'list2',
    'list3'
  ]
}

#index番号

インデックス番号を取得します。

index.html

<ul>
  <li v-for="(list,i) in lists">{{ list + i }}</li>
</ul>

//list1 0
//list2 1
//list3 2

配列要素+インデックス番号で取得することが出来ます。

#番外編for文

index.js

<span v-for="i in 10">{{i }}</span>

//12345678910