オブジェクトのリストを表示

v-for

by sarunokoshikake

HTML

<div id="app">
  <ul>
    <li v-for="val in list">
      {{ val.name }} {{ val.price }}円
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    list: [
      { name: 'とまと', price: 100 },
      { name: 'れたす', price: 200 },
      { name: 'きゅうり', price: 300 }
    ]
  }
})