リスト(<ul><ol><li>)レンダリング(v-for) [Vue.js]

Vue.js The Progressive JavaScript Framework

Webアプリケーションでは、データをリスト(一覧)で表示することがよくあります。
例えば、データを検索して結果を一覧で表示したり、ヘッダーやサイドバーのメニューを表示したりする場合にリストを使用します。

そこで今回は、Vue.jsでリストを描画(レンダリング)する方法について紹介します。

v-forディレクティブ

リストのレンダリングには、配列などのコレクションを操作するためにv-forディレクティブを使用します。
v-forディレクティブを使用することで、同一の処理(レンダリング)を繰り返し行うことができます。

リストのレンダリング

ここでは、JavaScript(プログラムのスクリプト)で定義した配列をリスト形式で描画します。

JavaScript

HTML

CSS

v-forディレクティブを繰り返し描画する要素に対して設定します。(ここではli要素に指定しています。)
v-forディレクティブには「要素 in 配列」の形式の構文を指定します。
v-forディレクティブは、配列の要素を1つずつ取り出して処理をしていきます。
ここでは「item in items」でitemsの要素をitemに取り出してitemを介して、itemsが持つオブジェクトにアクセスします。
itemsには「id」「name」「price」の3つのプロパティを持つオブジェクトの配列を指定していますので、v-forディレクティブでitemsの各要素のid、name、priceにアクセスすることができるようになります。
v-forディレクティブを使用する際は、key属性を指定します。key属性には一意になる値を指定します。
ここではitems配列が持つ要素のidプロパティの値が一意になっていますので、それをkey属性にv-bindディレクティブでバインドしています。

上記のサンプルコードをブラウザーで実行(表示)すると、次のような結果が表示されます。

Vue.js リストレンダリング サンプルコードの実行結果

v-forディレクティブのof

v-forディレクティブでは、区切り文字として「in」の代わりに「of」を使用することができます。これは JavaScript のイテレータ構文に近いものになります。

オブジェクトのv-for

v-forディレクティブでは、オブジェクトのプロパティに対して、反復処理することもできます。

HTML

JavaScript

実行結果

Vue.js オブジェクトのリストレンダリング サンプルコードの実行結果

Vue.js 入門 Tips 一覧