スポンサーリンク

Vue.js for文

Vue.js機能のfor文を使う

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

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

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

 

サンプルコード html

 

実行結果

解説

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

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

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

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

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

まとめ

  • htmlタグの属性で「v-for=要素(キー) in 配列」を指定してループ処理できる。
  • Vueインスタンスのdataには連想配列を指定できる。
Vue.js
スポンサーリンク
シェアする
trelab