みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
Vue.jsの解説シリーズです。
今回はVue.jsを使ったループ処理について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- Vue.jsを使ったループ処理の書き方が理解できる
Vue3のループ処理の書き方を解説していきます
ループ処理をつくろう
Vue.jsではJavaScriptでは少し馴染みのない
for~in文を使ってループ処理を記述します。
v-forとは
■構文
<div v-for="変数 in 配列名">{{変数}}</div>実際にはこのような記述式になり、
{{変数}}の部分に任意の処理を入れることができます。
繰り返される部分は上記の要素全体で
配列の数だけdiv要素が作られます。
ループ処理を使ってli要素をつくってみよう
以下は非常にメジャーな使い方の一つである
li要素をループさせる処理です。
See the Pen v-for 配列 by samehack (@samehack) on CodePen.
このように、非常に少ない処理で要素を作成できるので、
HTMLべた書きでありがちなコピペ地獄から抜け出すことができます。
おまけ：問題
- 名前→たかはし 年齢→19
- 名前→やまもと 年齢→28
- 名前→みやした 年齢→29
- 名前→うえすぎ 年齢→35
上記のオブジェクトを持つユーザリストを作成し、
・名前:たかはし 年齢:19
・名前:やまもと 年齢:28
・名前:みやした 年齢:29
・名前:うえすぎ 年齢:35
というli要素をv-forを用いて作成してください。
実行環境が無い方は雛形を用意したので
EDIT ON CODEPENをクリックしてそこで挑戦してみてください。
See the Pen Vue.js雛形 by samehack (@samehack) on CodePen.
まとめ
- v-for=”変数名 in 配列名”
- という構文を使うことで、要素を繰り返し作成できる
おまけの答え
See the Pen v-for オブジェクト by samehack (@samehack) on CodePen.
これが1発で解けた人は相当JavaScriptの理解度が高いですね！
配列やオブジェクトについて復習したい方は
わかりやすく解説した記事があるので、そちらをご参照ください。
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
