Vue.js分页组件实现：diVuePagination的使用详解(2)

<template>
 <div class="page">
 <p>//模拟ajax数据 1-3页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageInfo',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1-3页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"},
 {id:4,text:"44444444444"},
 {id:5,text:"555555555"},
 ]
 allpage=3
 nextpage=true;
 }else if(currentpage==2){
 list=[
 {id:1,text:"66666666"},
 {id:2,text:"7777777777"},
 {id:3,text:"8888888888"},
 {id:4,text:"99999999999"},
 {id:5,text:"101010"},
 ]
 allpage=3
 nextpage=true; 
 }else if(currentpage==3){
 list=[
 {id:1,text:"111111111111111"},
 {id:2,text:"121212"},
 {id:3,text:"131313"},
 {id:4,text:"141414"},
 {id:5,text:"15515"},
 ]
 allpage=3
 nextpage=false; 
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>

<template>
 <div class="page">
 <p>模拟ajax数据 1页</p>
 <ul class="ull">
 <li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
 </ul>
 </div>
</template>
<script>
export default {
 name: 'pageNews',
 data () {
 return {
 currentpage:0,
 list: [],
 allpage:"",
 nextpage:false
 }
 },
 methods:{
 getajaxlist:function(currentpage){
 var that=this;
 var list=[];
 var allpage="";
 var nextpage="";
 //模拟ajax数据 1页
 setTimeout(function(){ 
 if(currentpage==1){
 list=[
 {id:1,text:"111111"},
 {id:2,text:"222222"},
 {id:3,text:"3333333333"}
 ]
 allpage=1
 nextpage=false;
 }
 that.currentpage=currentpage;
 that.list=list;
 that.allpage=allpage;
 that.nextpage=nextpage;
 },200); 
 }
 },
 created:function(){
 //模拟生成第一页数据
 this.getajaxlist(1);
 }
}
</script>
<style>
 ul{ list-style:none;}
 ull{ margin:100px auto; width:1000px;line-height:30px;}
 li{height:30px;}
 .l{float:left;width:300px;}
 .r{float:left;width:600px;}
</style>