・v-forとは何？どうやって使うの？
こんな疑問にお答えします。
「v-for」とはディレクティブの１つ。
配列やオブジェクトの要素を、繰り返して表示できるのが特徴です。
今回は自分用のメモとして「v-for」についてまとめてみました。
参考にどうぞ
ということで、この記事では「Vue.jsの「v-for」の使い方」について解説していきます！
・Vue.jsの「v-for」の使い方
・key属性について
目次
【解説】Vue.jsの「v-for」の使い方【基礎編】
まずは配列を用いて「v-for」の基礎的な使い方を見ていきましょう。
「v-for」の書き方は通常下記になります。
v-for="要素 in 配列名"繰り返して表示したい配列名を右に、各要素が左に記述します。
要素や配列名は任意でつけることが可能。
「fruit in fruits」や「item in items」のように、「s」をつけて配列に複数の要素が格納されていることがわかるように記述することが多いかと。
実際に「v-for」を使ってみたのが下記になります。
<div id="app">
<ul>
<li v-for="item in items">
{{ item }}
</li>
</ul>
</div>const app = Vue.createApp({
data: () => ({
items: ['red' , 'green' ,'blue']
})
}).mount('#app')itemsの中に格納されている配列を、itemに1つずついれました。
それを繰り返しマスタッシュ構文で反映しております。
結果反映されるコードがこちら↓
<div id="app">
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</div>配列が繰り返し出力されましたね。
「v-for」では配列要素のインデクス、ようは位置をつけることができます。
やり方は下記のように、要素部分の第2引数に定義します。
v-for="(要素, インデックス) in 配列名"このインデックスも任意で名前をつけることが可能です。
実際にやってみたのがこちら↓
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{index}}:{{ item }}
</li>
</ul>
</div>const app = Vue.createApp({
data: () => ({
items: ['red' , 'green' ,'blue']
})
}).mount('#app')結果反映されるコードがこちら↓
<div id="app">
<ul>
<li>0:red</li>
<li>1:green</li>
<li>2:blue</li>
</ul>
</div>0からのインデックス番号が反映されましたね。
【解説】Vue.jsの「v-for」の使い方【key属性に注意】
「v-for」を使う時、要素を識別するためにkey属性をつけることが推奨されています。
例として下記のような感じ↓
<li v-for="(item, index) in items" v-bind:key="ユニークな値">ユニークな値とは要素を識別できるダブらない値ですね。
実際にやってみたのがこちら↓
<div id="app">
<ul>
<li v-for="(item, index) in items" v-bind:key="item.id">
{{index}}:{{ item.color }}
</li>
</ul>
</div>const app = Vue.createApp({
data: () => ({
items: [
{ id: 1, color: 'red' },
{ id: 2, color: 'green' },
{ id: 3, color: 'blue' }
]
})
}).mount('#app')item.idをkey属性に使うことで、ダブらずに要素を識別することができます。
ちなみにkey属性をつけるのが推奨されているのは、下記の点からだそうです。
- key属性をつけないと
→ある要素が追加・削除した時、他要素全て再レンダリングされてしまう。
パフォーマンス的に良くない。 - key属性をつけると
→要素が識別されるので、ある要素が追加・削除しても、他要素は再レンダリングされない。
パフォーマンス的に良い。
要素を識別するために「v-for」を使うときは、key属性をつけるのが推奨されています。
ただ注意点があり、それが下記。
- key属性に「インデックス」は使用NG
→要素が追加、削除されるたびに、他要素のインデックスが変わってしまうため。 templateタグには付与できない
→属性が存在しないため
※Vue3からは付与可能に
【解説】Vue.jsの「v-for」の使い方【その他編】
「v-for」を使ったその他の例をいくつか紹介していきます。
それがこちら↓
- オブジェクト
- 数値
- 文字列
順に見ていきましょう。
オブジェクトを「v-for」で反映する場合、引数を用いてインデックスとkeyを取得することができます。
やり方がこちら↓
v-for="(要素, key, インデックス) in 配列名"実際にやってみたコードがこちら↓
<div id="app">
<ul>
<li v-for="(item, key, index) in items">
{{index}}:{{ key }}:{{ item }}
</li>
</ul>
</div>const app = Vue.createApp({
data: () => ({
items: {
id: 1,
color: 'red',
name: '赤'
}
})
}).mount('#app')結果反映されるコードがこちら↓
<div id="app">
<ul>
<li>0:id:1</li>
<li>1:color:red</li>
<li>2:name:赤</li>
</ul>
</div>インデックス、keyと値が反映されていますね。
次に数値にて「v-for」を使ってみます。
<div id="app">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>結果反映されるコードがこちら↓
<div id="app">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>10までの数値が1から繰り返して反映されていますね。
続いて文字列に対して「v-for」を使ってみます。
<div id="app">
<ul>
<li v-for="value in message">
{{ value }}
</li>
</ul>
</div>const app = Vue.createApp({
data: () => ({
message: 'おはようございます'
})
}).mount('#app')結果反映されるコードがこちら↓
<div id="app">
<ul>
<li>お</li>
<li>は</li>
<li>よ</li>
<li>う</li>
<li>ご</li>
<li>ざ</li>
<li>い</li>
<li>ま</li>
<li>す</li>
</ul>
</div>こんな感じで、一文字ずつ文字列が繰り返して出力されますね。
【解説】Vue.jsの「v-for」の使い方【key属性に注意】：まとめ
- 「v-for」は配列やオブジェクトの要素を繰り返して反映できる
- 「要素 in 配列名」のように書く
- インデックスを付けることも可能
- 要素を識別させるためにkey属性をつけるのが推奨
「v-for」を使う時はためしてみてね！
