Vue.js

【Vue.js】v-for【配列に要素をマッピング】

Vue.jsのv-forディレクティブについて説明します。

v-forディレクティブとは?

配列に要素をマッピング

v-forとは、(公式では)配列に要素をマッピングすると説明されている。ちょっと解りづらい。

個人的に言い換えるなら、下記の表現の方が感覚的にはしっくりくる。

  • v-forとは、配列から要素を取り出したいときに使える
  • v-forとは、オブジェクトからkeyvalueindexを取り出したいときに使える

配列から要素を取り出す

下記に一例を示す。

HTML(test.html)

 

JavaScript(test.js)

 

動作お試し

https://jsfiddle.net/dice_record/0uwcmn6p/38/

characters配列から要素を1つずつ取り出し、箇条書きで出力しているのが解る。

オブジェクトからkeyやvalue、indexを取り出す

下記に一例を示す。

HTML(test.html)

 

JavaScript(test.js)

 

動作お試し

https://jsfiddle.net/dice_record/0uwcmn6p/44/

下記の点が判る。

  • personオブジェクトから value のみを取り出すことができる(v-for=”value in person”のように、inの前に引数を1つだけ指定した場合)
  • personオブジェクトから valueとkey のみを取り出すことができる(v-for=”(v, k) in person”のように、inの前に引数を2つだけ指定した場合。1つ目にvalue, 2つ目にkeyの値が入る)
  • personオブジェクトから valueとkeyとindex を取り出すことができる(v-for=”(v, k, i) in person”のように、inの前に引数を3つ指定した場合。1つ目にvalue, 2つ目にkey, 3つ目にindexの値が入る)

参照

『Vue.js入門』

Vue.js公式

以上です。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です