vuejs實現簡單的動態分頁

在開發遇到一個問題，不能使用框架中的分頁，突然自己一下子就懵了，回家一想，這不就是我之前寫的換一換改版嗎，實現也不難：
1.首先template中的代碼是這個樣子的
<div class="pageInfo">
         <p>共{{total}}頁</p>
         <p>
            <span @click="backHandle">上一頁</span>
            <span>{{pageNumber}}</span>
            <span>/</span>
            <span>{{pageTotal}}</span>
            <span @click="nextHandle">下一頁</span>
         </p>
      </div>
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的分頁，