Vue.jsにおけるループ処理。v-forで実装する
Vue.jsにおけるループ処理について解説。
v-forで実装する
Vue.jsにおけるループ処理はv-forで実装できます。
以下ではdataに人の名前と年齢を配列で格納したものをhtml側でループ処理を使って順次表示していきます。
<div id="app">
<ol>
<li v-for="person in persons">
{{ person.name }} | {{ person.age }}
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
persons: [
{ name: "Mike", age: 20 },
{ name: "Bob", age: 22 },
{ name: "Mary", age: 24 },
]
}
})jsで定義している配列、personsの中身を順次、personに出力していっています。
ここら辺は多言語のループ処理と同じような記述なので、書きやすそうです。
keyに値を指定する
上記のコードでも動きますが、v-forにはkeyを指定することが推奨されます。
v-bindディレクティブでkeyを指定し、一意な値を指定します。
<div id="app">
<ol>
<li v-for="person in persons" :key="person.name">
{{ person.name }} | {{ person.age }}
</li>
</ol>
</div>v-bindでディレクティブは省略形で記載。
ただ、このコードは動きますがNGです。
なぜなら一意な値に名前を指定しているからです。名前なんて重複してしまいますよね。
一意な値はidを記述します。
<div id="app">
<ol>
<li v-for="person in persons" :key="person.id">
{{ person.name }} | {{ person.age }}
</li>
</ol>
</div>keyを指定することでレンダリングのスピードにも関係するそうなので、意識してセットで覚えておいた方がよさそうです。
データのベタ書きは嫌だ
ループ処理を使えばリストやテーブルで色々と出来ますね。
ただ、js側で格納しているデータを出力する場合、サンプルのようなデータのベタ書きはスマートではないなぁ、
と思っていたらありました。
Vue.jsで、取得したJSONデータの配列を元に繰り返し描画する方法
特定の条件でリストを並び替える
js側でデータのリストを特定の条件で並び替えたものを表示させることもできます。
jsのfilter関数を利用すると、特定の条件に合致するものを抽出できたりしますね。
(例：名簿リストから血液型Oの人のみ抽出)
参考：
