【Vue.js】繰り返し(v-for)

Javascript

2018.07.22

Javascript用フレームワーク「Vue.js」でDOMを繰り返し(v-for)する方法をソースコード付きでまとめました。

繰り返し(v-for)
サンプルコード

繰り返し(v-for)

Javascript用フレームワーク「Vue.js」では、v-for属性で繰り返しができます。

書式

<div v-for=”(変数名, インデックス) in 配列名”>{{ 表示する変数名 }}</div>

dataで保持している配列をforループで回し、表示したい箇所に「index」や「キー」を記述します。

サンプルコード

サンプルプログラムのソースコードです。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<!-- Vue.js の読み込み -->
<pre title="https://cdn.jsdelivr.net/npm/vue"></pre>

</head>
<body>

<div id="app">
  <ul>
    <li v-for="(servant, i) in servants">
      ({{ i + 1 }}) Name:{{ servant.name }} ,  class:{{ servant.class }}
    </li>
  </ul>
</div>

<pre title="./js/main.js"></pre>
</body>
</html>

./js/main.js

var app = new Vue({
    el: '#app',
    data: {
      servants: [
        {name: 'Altria', class: 'Savar'},
        {name: 'Jeanne', class: 'Ruler'},
        {name: 'Emiya', class: 'Archer'}
      ]
    }
});

■結果表示

・(1) Name:Altria , class:Savar
・(2) Name:Jeanne , class:Ruler
・(3) Name:Emiya , class:Archer

–	関連ページ
1	■【Vue.js入門】使い方・サンプル集
2	■Javascript入門サンプル集
3	■Node.js入門