BETA

【Vue.js】v-forの使い方まとめ

投稿日:2019-01-07
最終更新:2019-01-07
※この記事は外部サイト(https://dolphin-rokujiro.com/work/vue-js/v...)からのクロス投稿です

v-forの基本的な使い方


指定した回数ループさせる


素のJavaScriptも含め、他の言語と比べると超シンプルです。
シンプルすぎて逆に一瞬戸惑うレベル。

See the Pen qLYVLa by 匠 (@dilphinrokujiro) on CodePen.




配列を展開する


こちらも、かなりシンプルですね。
配列の要素を1つずつ取り出しながら表示しています。

See the Pen jXxYNo by 匠 (@dilphinrokujiro) on CodePen.




オブジェクトを展開する


オブジェクトも普通の配列と同じように展開できます。

See the Pen GPdyJG by 匠 (@dilphinrokujiro) on CodePen.




v-forの応用的な使い方


keyを取得する


第二引数を指定すると、オブジェクトのkeyも取得できます。

See the Pen JwvMKN by 匠 (@dilphinrokujiro) on CodePen.




オブジェクトの配列を展開する



オブジェクトの配列を展開する場合は、以下のようになります。

See the Pen QzrQPO by 匠 (@dilphinrokujiro) on CodePen.




ループしながらループした回数を取得する



以下の通り、第二引数を指定するとインデックスが取得できるので、
何回ループしたか、ループしている最中に把握できます。(これ意外と便利)

See the Pen wRjprb by 匠 (@dilphinrokujiro) on CodePen.





ループをネストする



オブジェクトの配列を展開し、オブジェクトの中にある配列も展開したい。というような場合、以下のようにしてループをネストすることができます。

See the Pen maLpav by 匠 (@dilphinrokujiro) on CodePen.




けっこう単純ですね。

v-forの注意点

v-forにはkeyを必ず指定する


v-forディレクティブを使用する場合、key属性を必ず指定する必要があるようです。
しかし、指定してはいけないパターンもあるようです。(どういうこっちゃ)

詳しくは別の記事にまとめています。
https://dolphin-rokujiro.com/work/vue-js/v-for_key_binding/

v-forとv-ifを一緒に使わない

公式サイトのスタイルガイドによると、v-forとv-ifは一緒に使うのを避けるべきとのことです。

理由としては、パフォーマンスが悪くなるからです。
v-forで展開された変数をv-ifで評価しようとすると、レンダリングされるたびに配列をすべて繰り返し処理してしまうからです。
配列を必要以上に繰り返し処理するのは、潜在的なバグの温床になってしまう可能性があります。
処理するデータがせいぜい数十件だから、と甘く見ずにキチンと効率良く処理しておくべきでしょう。

もし、v-forとv-ifを同時に使う必要が出てきた場合は、上記のスタイルガイドを参考に、算出プロパティなどでv-forで展開する配列をあらかじめフィルタリングする方法を考えてみましょう。

参考文献

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@rokujiroの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!