SOURCE

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{todo.text}}</li>'
})
var app = new Vue({
  el：'#app',
  data: {
    groceryList: [{
      text: '蔬菜'
    },
    {
      text: '奶酪'
    },
    {
      text: '其他'
    }]
  }
})

<div id="app">
  <ol>
    <todo-item v-for="item in groceryList" :todo="item">
    </todo-item>
  </ol>
</div>