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: '走过小酒馆的门口'})
            },
        },
    })