vuejs实现简单的动态分页

在开发遇到一个问题，不能使用框架中的分页，突然自己一下子就懵了，回家一想，这不就是我之前写的换一换改版吗，实现也不难：
1.首先template中的代码是这个样子的

         

共{{total}}页

         

            上一页
            {{pageNumber}}
            /
            {{pageTotal}}
            下一页
         

     

2.在data中定义需要的信息
 total:0,
 page:0,
 pageTotal:0,
 pageNumber:1,
              
3.接下来就是在methods中实现分页切换的效果啦，
// 上一页
         backHandle(){
            if(this.pageNumber>1){
               this.pageNumber--
               this.page-=4;
               this.newList = this.list.slice(this.page-4,this.page);
            }
         },
         // 下一页
         nextHandle(){
            if(this.pageNumber < this.pageTotal){
               let n=4;
               this.newList = this.list.slice(this.page,this.page+4);
               this.page+=4
            }
         },
         // 这个是获取列表，我直接在data中定义了一个简单的列表，来查看效果
         changeList(){
            this.total = this.list.length
            this.pageTotal = Math.ceil(this.list.length/4)
            const listLength = this.list.length
            this.newList = this.list.slice(this.page,this.page+4);
            this.page +=4;
            if(this.page>listLength){
               this.page = 0;
            }
         }
changeList 还需要在mounted()中调用一下，分页的信息就能展示在页面上

好啦，这就是一个简单的vue的分页，