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

こんにちは、”はふぃ”です。

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

< Vue >

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

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

< JavaScript >

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

間違い

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

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

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

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

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

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