かきノート

Vue.js:通常の for文って?

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>

Relative Posts:

Vue.js:v-model がよく分かんなかったんで調べた。

April 16, 2019

Vue.js:created と mounted の使い分けがよく分かんない。

April 14, 2019

福岡の物流エンジニアが、七転び八起きしたあと九回転び、寝っ転がったまま何かやってる事を垂れ流しているブログ

RotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-icon