<div id="personapp">
<h3>Person List</h3>
<person-item v-for="person in personitems" v-bind:person="person"></person-item>
</div>
<script type="text/x-template" id="personitem">
<div id="personitem">
<p>Hello {{person.name}}</p>
<p>Age: {{person.age}}</p>
<hr/>
</div>
</script>body {
background-color: lightsteelblue;
}Vue.component('person-item', {
props: ['person'],
template: '#personitem'
});
var app = new Vue({
el: '#personapp',
data: {
personitems: [
{name: 'tamer', age: 25},
{name: 'tolga', age: 45},
{name: 'veli', age: 33}
]
}
}); 
External CSS
This Pen doesn't use any external CSS resources.