【Vue.js】v-for について

はじめに

こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-forについてアウトプットしていきます！

v-forとは

v-forとはvueで配列に基づいて、リストレンダリングする為に使用するディレクティブです。

書き方

HTML

<div id ="app">
  <ol>
    <li v-for="color in colors">{{ color }}</li>
  </ol>
</div>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
       colors:['Red','Green','Blue'],
    }
})

今回は番号付きでの表示のためolタグを使用しました。
配列名colorsを設置し、配列の値を定義します。['Red','Green','Blue']
HTNL側でolタグで囲み<li v-for="color in colors">{{ color }}　</li>というふうに書いてください。

このようにすると上記の画像のように出力されます。

まとめ

今回のポイントとしては、下記のように、配列名はエイリアス名の複数形にしておくとわかりやすいのでそのように書くことを推奨します。

HTML

<div id ="app">
  <ol>
    <li v-for="① in ①s">{{ ① }}</li>
  </ol>
</div>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
       ①s:['Red','Green','Blue'],
    }
})

最後に

今回はv-forについてアウトプットしました。
今回の記事を読んで気になったこと、質問等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！