v-for [Vue.js]

v-for

参考：

リストレンダリング | Vue.js [公式]

整数値

v-for に整数値を与えた場合、指定した回数だけテンプレートが繰り返される。

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

参考：

範囲付き v-for | Vue.js [公式]

v-bind:key

key として各要素を識別するためのユニークな整数値、または文字列などのプリミティブ値を与える。

<div
  v-for="item in items"
  :key="item.id">
  {{ item.message }}
</div>

参考：

key | Vue.js [公式]

v-bind:key を使う時と使わない時の違い – スタック・オーバーフロー

フィルタリング／ソート

「算出プロパティ」もしくは「メソッド」を使う。

参考：

フィルタ/ソートされた結果の表示 | Vue.js [公式]

算出プロパティ | Vue.js [公式]

算出プロパティ vs メソッド | Vue.js [公式]

分割代入

参考：

Vue.js の v-for で分割代入をする – Qiita

Using destructuring assignment in for loops | SiMedia Tech

[2.5.7] Object destructuring within v-for gives “invalid v-for alias” error · Issue #7096 · vuejs/vue – GitHub

[feature request] destructuring in template · Issue #4264 · vuejs/vue – GitHub

Array destructuring in v-for · Issue #4884 · vuejs/vue – GitHub

support destructuring in v-for alias · vuejs/vue@a0d8603 – GitHub