vue.js
for文

Vue.jsで指定回数の処理を実行するfor文

はじめに

Vueでfor文と言えば、以下のように配列をループさせることが多い。

Vue
<!-- Vueでよく使うfor文 -->
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

だが、一般的なfor文のように指定回数を繰り返すだけの処理を書きたい場合に「あれ…、どうやるんだ?」となったのでメモがてら。

js
// 指定回数を繰り返すfor文(js)
for (const i = 0; i < 10; i++) {
  console.log('hoge');
}

間違い

処理を実行したい回数分の要素を持った配列を使う。

Vue
<ul id="example-2">
  <li v-for="n in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
    {{ n }}回目
  </li>
</ul>

これでも実現できるので間違いではないのかもしれないが、見てわかるように無駄が多い。

正しい

「ん?そこに数値を置けるの?」と一瞬戸惑うが、シンプルでわかりやすい。

Vue
<ul id="example-3">
  <li v-for="n in 10">
    {{ n }}回目
  </li>
</ul>

おわりに

もちろんVue.jsの公式ドキュメントにも載ってます。
("for文と言えばこれ!!"ぐらい代表的な使い方だし、もう少し上の方に書いてくれたら見逃すこともなかったのに…)
範囲付き v-for (公式ドキュメント)