概要
Vue.jsでv-forによる処理の方法を記載します。
記述方法
v-forは以下のように変数 in 配列という形式で記載します。
タグは処理の内容によって変更してください。
<template v-for="変数 in 配列">
// 処理内容
</template>
実例
データ配列をテーブルに出力する、bodyタグ内の実装例を挙げます。
<body>
<div id="app">
<table>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
<tr v-for="list in lists">
<td> {{ list.item1 }} </td>
<td> {{ list.item2 }} </td>
<td> {{ list.item3 }} </td>
</tr>
</table>
</div>
<script>
var data = {
lists:[
{item1:'aaa', item2:'bbb', item3:'ccc'},
{item1:'ddd', item2:'eee', item3:'fff'},
{item1:'ggg', item2:'hhh', item3:'iii'},
]
}
var app = new Vue({
el: '#app',
data: data
});
</script>
</body>
実行結果
以下のようになれば成功です。
item1 item2 item3
aaa bbb ccc
ddd eee fff
ggg hhh iii
styleで枠などを実装してあげるとよりテーブルっぽくなると思います。