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