vue自定义组件和列表循环--vue学习笔记

<div id="app-7">
<shaoyou v-for='item in item' v-bind:item='item' v-bind:key='item.id'>
</shaoyou>
<button type="button" @click='add' name="button">Add</button>
</div>

Vue.component(
'shaoyou', {
props: ['item'],
template: '<p>{{ item.id +".  "+ item.text }}</p>'
}
)

var app = new Vue({
el: '#app-7',
data: {
item: [{
id: 0,
text: '我会把手揣进裤兜'
}, {
id: 1,
text: '走到玉林路的尽头'
}, ],
},
methods:{
add:function(){
app.item.push({id: '新增',
text: '走过小酒馆的门口'})
},
},
})