v-forの使い方-Vue.js
Vue.js Article
ここでは、v-forディレクティブの基本的な使い方をサンプルコードを参考に解説していきます。
v-forの基本的な使い方
配列など複数のデータを繰り返し表示させたいとき、v-forディレクティブを使うことができます。
記述の形式としては以下のような特別な形式を使います。
v-for="要素名 in 配列"実際に動くコードとその結果を見てみます。
<div id="app">
<ul>
<li v-for="item in items">
{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
items: [
{ id: 1, name: "apple", price: 150 },
{ id: 2, name: "orage", price: 120 },
{ id: 3, name: "peach", price: 200 },
{ id: 4, name: "lemon", price: 80 },
],
}
})
</script><div id="app">
<ul>
<li>apple</li>
<li>orage</li>
<li>peach</li>
<li>lemon</li>
</ul>
</div>itemsに定義した中身を繰り返し表示できていることがわかります。
先ほどv-for="要素名 in 配列"と記述すると言いましたが、inの代わりにofを用いることもできます。
indexの設定
要素にインデックスを付けたい場合、以下のようにすることで可能です。
インデックスは0から始まります。
v-for="(要素名,インデックス名) in 配列"<div id="app">
<ul>
<li v-for="(item,index) in items">
{{index}}-{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
items: [
{ id: 1, name: "apple", price: 150 },
{ id: 2, name: "orage", price: 120 },
{ id: 3, name: "peach", price: 200 },
{ id: 4, name: "lemon", price: 80 },
],
}
})
</script><div id="app">
<ul>
<li>0-apple</li>
<li>1-orage</li>
<li>2-peach</li>
<li>3-lemon</li>
</ul>
</div>keyの設定
リストの内容が単純な場合や意図的な場合を除いて、v-forにはkey属性を与えることが推奨されています。これは、ユーザーの操作などで要素の状態が変化したときに、どの要素が変化したのかを追跡できるようにするためです。
<div id="app">
<ul>
<li v-for="item in items" v-bind:key="item.id">
{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
items: [
{ id: 1, name: "apple", price: 150 },
{ id: 2, name: "orage", price: 120 },
{ id: 3, name: "peach", price: 200 },
{ id: 4, name: "lemon", price: 80 },
],
}
})
</script>適切に追跡してもらうためにも一意（ユニーク）なkey属性を与えるようにしましょう。
key属性についてはこちら
objectや文字列などに対するv-for
v-forは配列だけでなくobjectや文字列などに対しても使うことができます。
object
<div id="app">
<ul>
<li v-for="value in fruit">
{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
fruit:{
name: "apple",
num: 200,
price: 150,
},
}
})
</script><div id="app">
<ul>
<li>apple</li>
<li>200</li>
<li>150</li>
</ul>
</div>今回はfruitというオブジェクトを定義してv-forに使用しました。各プロパティが表示されていることが分かります。
objectでもインデックスを付けることができ、さらにkeyも取得できます。
v-for="(要素名,要素のキー,インデックス名) in 配列"<div id="app">
<ul>
<li v-for="(value, key, index) in fruit">
{{index}}-{{key}}:{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
fruit: {
name: "apple",
num: 200,
price: 150,
},
}
})
</script><div id="app">
<ul>
<li>0-name:apple</li>
<li>1-num:200</li>
<li>2-price:150</li>
</ul>
</div>文字列
<div id="app">
<ul>
<li v-for="value in string">
{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
string: 'Fujiya',
}
})
</script><div id="app">
<ul>
<li>F</li>
<li>u</li>
<li>j</li>
<li>i</li>
<li>y</li>
<li>a</li>
</ul>
</div>一文字ずつ出力されます。
整数値
<div id="app">
<ul>
<li v-for="n in 5">
{{n}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app"
})
</script><div id="app">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>1から順番に出力されます。
v-forとv-if
v-forとv-ifを同じタグに対して用いることは推奨されていません。
というのも、v-forの方がv-ifよりも評価される優先度が高いために、パフォーマンスの低下などのデメリットが生じるからです。
対策としては、以下のような方法があります。
- 配列の要素に対する場合、配列に対して算出プロパティを用いてフィルタリングを掛ける。
- 配列全体に対する場合、親要素（
ul,ol）に対してv-ifを用いる。
公式のスタイルガイドにて詳しく解説がありますのでそちらを参照してください。
まとめ
今回はv-forの基本的な使い方を解説しました。
keyやfilterなど気を付ける点がいくつかあるので、別の記事で解説したいと思います。