vue模拟加载更多功能（数据追加）

by zhoou changhong

HTML

<div id="demo">
    <p v-for='key in main'><b>{{key.num}}</b>{{key.title}}</p>
    <button v-on:click='loadMore'>加载更多</button>
</div>

CSS

#demo b {
    float: right;
    color: red;
}

JavaScript

var a=2;
new Vue({
    el:'#demo',
    data:{
        main:[{'title':'title0','num':0},{'title':'title1','num':1}]
    },
    methods:{
		loadMore:function(){
            var b=[{'title':'title'+a,'num':a},{'title':'title'+(a+1),'num':(a+1)}]
          	this.$set('main',this.main.concat(b));
            a=a+2;
        }
    }
})