この記事では、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のコードはこのような感じです。
<script>
var user = {
firstName: 'Taro',
lastName: 'Yamada',
age: 28
}
</script>
次に、dataオプションに、userという名前のobjectを用意します。
ファーストネーム、ラストネーム、年齢を定義します。
var app = new Vue({
el: '#app',
data: {
user: {
firstName: 'Taro',
lastName: 'Yamada',
age: 28
}
}
})
次に、template側でこのobjectを表示します。
まず、valueだけ表示してみます。
オブジェクトに格納されている値をリスト表示するために、v-for ディレクティブ使用しています。
<div id="app>
<ol>
<li v-for="user in users">{{ color }}</li>
</ol>
</div>
このように、objecetのvalueが表示されました。
- Taro
- Yamada
- 28
v-for ディレクティブは value in objectといった形式で、形式で繰り返しを実行できます。
繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。
このvalue には、user objectの、valueが繰り返しのたびに、1個づつ入ります。
繰り返しが進むごとに、valueに入る値が代わります。
このオブジェクトの名前は、dataオプションの、user プロパティで定義したものとそろえます。
次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。
つぎの様に記述してください。
<div id="app>
<ol>
<li v-for="(user, key) in users">{{ key }}:{{ color }}</li>
</ol>
</div>
とします。
オブジェクトから、価を一つづつとりだして、 keyと、valueを1つずつ、表示していきます。
注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。
これで、keyとvalueを画面に表示することができました。
ちなみに、この変数名は、任意につけられるので、
つぎの様に記述してください。
<div id="app>
<ol>
<li v-for="(user, key) in users">{{ k }}:{{ v }}</li>
</ol>
</div>
としても、同じ結果が得られます。
userの部分は、データプロパティで、指定した名前と揃えてください。
Vue.jsのv-forについて動画で学習する
おわりに
このレクチャーでは、オブジェクトの繰り返しの描画 v-forディレクティブ、について学習しました。
動画でプログラミング入門をしよう
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する
