vue实现分页加载列表方法？

前景:前后端分离,需要与后端配合,调取后端数据接口。

图片：

css代码

.active{
background-color: #3778AD;
}

html代码

<nav aria-label="Page navigation" style="text-align:center;">
//上一页
<ul>
<li @click="prePage()" :class="pageNo<=1?'disabled':''">
<a aria-label="Previous" ><span aria-hidden="true" >&lt;</span></a>
</li>
//页数列表
<li :class="pageNo==index?'active':''" v-for="index in pageTotal" :key="index" @click="curPage(index)">
<a>{
   
   {index}}</a>
</li>
//下一页
<li  @click="nextPage()" :class="pageNo>=pageTotal?'disabled':''">
<a  aria-label="Next" ><span  aria-hidden="true">&gt;</span></a>
</li>
</ul>
<nav>

js

//页面加载请求数据
window.onload=function(){
new Vue({
el:'#app',
data:{
  lists:[],
  pageTotal:1.//总页数
  pageNo:1,//默认页
},
methods:{
  getList(i){
   this. pageNo=i|| this. pageNo;
   axios({
     method:'get',//请求方式
     //使用模板字符串    jquery获取属性${}
     url:`http://192.168.0.0.1:8000/home/page/${pageNo}/${pageTotal}`
   }).then(res=>{
      let {data, pageTotal}=res.data;
      this.lists=data;//数组接收
   }).catch(error=>{
     console.log(error)
  })
  },
  //上一页
  prePage(){
   if(pageNo>1){
       this.getList(--this.pageNo);
   }
  },
  //下一页
  nextPage(){
    if(pageNo<pageTotal){
         this.getList(++this.pageNo);
    }
  },
},
mounted(){
  this.getList()
},
})
}

记录一下,少走弯路！！！