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