基礎からメモ： Vue.js CH1-p39 リストの表示

Vue.js

配列リストをv-forで繰り返し表示する。

[index02.html]

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

[main02.js]

var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご','ばなな','いちご']
  }
})

console.log(app.list);

これで

<ol>
    <li>りんご</li>
    <li>ばなな</li>
    <li>いちご</li>
</ol>

と表示され、コンソールにも ["りんご", "ばなな", "いちご"]と出力される。

  • 配列リストを繰り返し表示するにはv-forを使う。