Vue.js for文

Vue.js機能のfor文を使う
1. 解説
まとめ

Vue.js機能のfor文を使う

公式ドキュメントの条件分岐とループの項目で説明しているfor文について記載します。

Vue.jsのfor文は、htmlタグの属性にv-forを指定することができ、

そこで配列をループ処理することができます。

サンプルコード html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-for="value in list">
        {{ value.text }}
      </p>      
    </div>
  </body>
</html>
<script>
var app = new Vue({
  el: '#app',
  data: {
    list: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
</script>

実行結果

解説

まずは、Vueインスタンスのところから解説します。

まずは、下記のように連想配列で、キー：値の配列データをVueインスタンスのdataに作ります。

  data: {
    list: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }

そして、html側では、htmlタグの属性にv-forを追加して、

「v-for=要素(キー) in 配列」でループ処理します。

その後、{{ 要素(キー).値 }}で、データを1つずつ表示しています。

      <p v-for="value in list">
        {{ value.text }}
      </p>

まとめ

htmlタグの属性で「v-for=要素(キー) in 配列」を指定してループ処理できる。
Vueインスタンスのdataには連想配列を指定できる。