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