セージ の メモ書き

メモこそ命の恩人だ

Vue.js - v-for ディレクティブ

v-for

リストレンダリング — Vue.js

  • リストなどのデータを繰り返し処理できる。

配列

プリミティブ型の配列

<div id="app">
  <ul>
    <li v-for="sample in sampleList1">
      {{sample}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      sampleList1: [ "aaa", "bbb", "ccc" ]
    }
  });
</script>

オブジェクトの配列

  • オブジェクトの場合、key 属性の指定が必要。
  • ただし、
    • なくても動作したことを確認。
    • Idの内容が重複してもエラーなしで描画できた。
<div id="app">
  <ul>
    <li v-for="sample in sampleList1" v-bind:key="sample.id">
      {{sample.id}} {{sample.name}} {{sample.age}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      sampleList1: [
        { id: 1, name: "suzuki", age: 20 },
        { id: 2, name: "kimura", age: 30 }
      ]
    }
  });
</script>

index 付与

  • 0 スタートのindexを取得できたことを確認。
  • index を扱い場合は便利。
<div id="app">
  <ul>
    <li v-for="(sample, index) in sampleList1" v-bind:key="sample.id">
      {{index}} {{sample.id}} {{sample.name}} {{sample.age}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      sampleList1: [
        { id: 1, name: "suzuki", age: 20 },
        { id: 1, name: "suzuki", age: 20 },
        { id: 2, name: "kimura", age: 30 }
      ]
    }
  });
</script>


数値を列挙

  • 指定数値の値分を列挙できた。
<div id="app">
  <div>
    <p v-for="n in 10">
      {{ n }} です。 
    </p>
  </div>
</div>


オブジェクトのプロパティを列挙

  • オブジェクトの各プロパティを列挙できた。
  • 括弧内の変数名は任意。順番が大切。
    • 1つ目:値
    • 2つ目:プロパティ名
    • 3つ目:インデックス
  • 1のみでもOK。1と2でもOK。
<div id="app">
  <ul>
    <li v-for="(value, key, index) in sample1">
      {{index}} {{key}} {{value}}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      sample1: {
        id: 1,
        name: "suzuki",
        age: 20
      }
    }
  });
</script>



以上