この記事では、Vue.jsで、オブジェクトの繰り返しを v-forディレクティブで行う方法について学習します。
この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。
実現したいこと。
オブジェクトから、値を取り出して、てリスト表示。
Taro Yamada 28
オブジェクトのkeyとvalueを、リスト表示。 Taro : firstName Yamada : lastName 28 : age
v-for 構文
＜要素名 v-for=”バリュー in オブジェクト”＞
{{ 表示したいバリュー }}
＜/要素名＞
または、
＜要素名 v-for=”(バリュー, キー) in オブジェクト”＞
{{ 表示したいキー or バリュー }}
＜/要素名＞
構文は、このようになっていますが、実際にプログラムを書いて習得していきましょう。
実装
空のテンプレートをマウントしてある、状態からはじめます。
まず、表示に使うユーザーオブジェクトを用意します。
オブジェクト何か、初心者向けにざっくり説明すると、
オブジェクトとは、様々な特性（言い換えると、プロパティ）をもったもの
です。
例えばの事例として、ユーザーオブジェクトを作成するJavaScriptのコードはこのような感じです。
次に、dataオプションに、userという名前のobjectを用意します。
ファーストネーム、ラストネーム、年齢を定義します。
var app = new Vue({
el: '#app',
data: {
user: {
firstName: 'Taro',
lastName: 'Yamada',
age: 28
}
}
})
次に、template側でこのobjectを表示します。
まず、valueだけ表示してみます。
オブジェクトに格納されている値をリスト表示するために、v-for ディレクティブ使用しています。
-
- {{ value }}
このように、objecetのvalueが表示されました。
Taro Yamada 28
v-for ディレクティブは value in objectといった形式で、形式で繰り返しを実行できます。
繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。
このvalue には、user objectの、valueが繰り返しのたびに、1個づつ入ります。
繰り返しが進むごとに、valueに入る値が代わります。
このオブジェクトの名前は、dataオプションの、user プロパティで定義したものとそろえます。
次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。
つぎの様に記述してください。
- {{ key}} : {{ value }}
とします。
オブジェクトから、価を一つづつとりだして、 keyと、valueを1つずつ、表示していきます。
注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。
これで、keyとvalueを画面に表示することができました。
ちなみに、この変数名は、任意につけられるので、
- {{ k }} : {{ v }}
としても、同じ結果が得られます。
userの部分は、データプロパティで、指定した名前と揃えてください。
Vue.jsのv-forについて動画で学習する
おわりに
このレクチャーでは、オブジェクトの繰り返しの描画 v-forディレクティブ、について学習しました。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
