<ol class="page" id="app-7">
    <user v-for="item in list" v-bind:item="item"></user>
</ol>
<!-- 引用user组件 -->
.page {
  p {
    display:inline-block;
    margin: 5px;
  }
  .name {
    color:purple;
  }
  .job {
    color:green;
  }
  .hobby {
    color:#e96900;
  }
}
View Compiled
// 定义一个名为user的组件
Vue.component('user', {
  props: ['item'],
  template: '<li class="userInfo"><p class="name">{{item.name}}</p><p class="job">{{item.job}}</p><p class="hobby">{{item.hobby}}</p></li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    list:[
      {
        name: 'Neil',
        job: 'freelancers',
        hobby: 'folk art'
      },
      {
        name: 'Judy',
        job: 'writer',
        hobby: 'travel'
      }
    ]
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://npmcdn.com/vue/dist/vue.min.js