April 15, 2019 • ☕️ 2 min read
Vue.js のループ処理って、v-for
を使う事になると思うんだけど、通常の for文として使う用の構文って無いのかしら。
イテレータとして使いたい訳じゃなくて、「単に5回まわす」みたいな事。
こんなレベルの処理で。
for(var i=0; i < 10; i++){
console.log(i)
}
色々試してみたら、これで行けた。
コード
<div v-for="(index) in 5">
<span>{{index}}</span>
</div>
実行結果
1
2
3
4
5
こんな感じ。
多分、問題なさそう。
あと、1つ飛ばしで出したい時ってどうするんだ?
こんな感じの。
for (var i=2; i < 10; i+=2) {
console.log(i)
}
思いついたのは、「偶数だけを対象にしたい」みたいな感じで、
手段じゃなくて目的まで遡り、こんな風に書くやりかた。
コード
<div v-for="(index) in [1,2,3,4,5].filter( (x) => { return x % 2 == 0})">
<span>{{index}}</span>
</div>
実行結果
2
4
これがベストな方法なのかは知らん。
Vue.js、分からん事だらけや・・・
Vue.js は学習コストが低めという話を聞いたことがあるが、自分にとっては全くそんな事はないぞ・・・。
「範囲付き v-for」という名前で、公式サイトにちゃんと書いてあった。
https://jp.vuejs.org/v2/guide/list.html#%E7%AF%84%E5%9B%B2%E4%BB%98%E3%81%8D-v-for
<div>
<span v-for="n in 10">{{ n }} </span>
</div>