v-for ディレクティブ
ディレクティブについての続きです。
v-for
v-forディレクティブを要素に追加すると、オブジェクトの繰り返しを行うことができます。
構文
<要素名 v-for="バリュー in オブジェクト">
{{ 表示したいバリュー }}
</要素名>
<要素名 v-for="(バリュー, キー) in オブジェクト">
{{ 表示したいキー or バリュー }}
</要素名>
dataオプションに登録した配列の値をv-forディレクティブを使ってリスト表示させます。
例
index.html
<div id="app">
<p v-for="col in colors">
{{ col }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el: '#app',
data: {
colors: ['red', 'green', 'blue']
}
})
ブラウザ
例２
index.html
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
index.js
var app = new Vue({
el: '#app',
data: {
object: {
firstName: 'Hayashi',
lastName: 'Yoshino'
}
}
})
ブラウザ
