こんにちは、”はふぃ”です。
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 (公式ドキュメント)