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

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

图片：

css代码

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

html代码

//上一页


<

//页数列表

{{index}}

//下一页

>

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

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