もちろんVue.jsにも繰り返し処理があります。
「v-for」を使います（分かりやすい名前ですね）。
早速、どうやるのか試していきましょう！
スクリプト（Vue.js for文のような繰り返し処理はどうやるの？サンプル（v-for））
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var app4 = new Vue({ el: '#app-4', data: { images: [ { url : "https://goo.gl/UxiEqp", alt: "ねこちゃん写真01"}, { url : "https://goo.gl/wSDAUr", alt: "ねこちゃん写真02"}, { url : "https://goo.gl/aH9c99", alt: "ねこちゃん写真03"}, { url : "https://goo.gl/FoT2Jq", alt: "ねこちゃん写真04"}, { url : "https://goo.gl/L5naxw", alt: "ねこちゃん写真05"} ] } }) |
まずは、繰り返し処理に入れ込む情報を作りましょう。
dataオブジェクトにオブジェクト配列を作ります。
オブジェクトの中に「url」「alt」を入れておきましょう。
HTML（Vue.js for文のような繰り返し処理はどうやるの？（v-for））
|
1 2 3 |
<div id="app-4"> <img v-for="img in images" v-bind:src="img.url" v-bind:alt="img.alt"> </div> |
「v-for=”img in images”」の箇所ですが、スクリプトで宣言したimages配列を１つずつ取り出して「img」というオブジェクトに入れています。
後は「img」オブジェクトから値を取り出して「v-bind」で設定していくだけです。
v-bindが良くわからないという方ははこちらです。
これで以下のようなタグに置き換わることになります。
|
1 2 3 4 5 6 7 |
<div id="app-4"> <img src="https://goo.gl/UxiEqp" alt="ねこちゃん写真01"> <img src="https://goo.gl/wSDAUr" alt="ねこちゃん写真02"> <img src="https://goo.gl/aH9c99" alt="ねこちゃん写真03"> <img src="https://goo.gl/FoT2Jq" alt="ねこちゃん写真04"> <img src="https://goo.gl/L5naxw" alt="ねこちゃん写真05"> </div> |
「v-for」を上手に使えば、少ないコードで多くの処理が一気にできちゃいそうですよね！
サンプルも作ってます。
See the Pen Vue.js for文のような繰り返し処理はどうやるの？サンプル（v-for） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
