vue實現簡單的前端分頁功能

假設每頁顯示10條，一共100條，那么共10頁，第一頁顯示1-10條數據，第二頁顯示11-20條數據...以此類推是不是有思路了

let productList = [];

export default {
      data() {
       return {
               productList, //所有數據
              totalPage: 1, // 統共頁數，默認為1
             currentPage: 1, //當前頁數 ，默認為1
            pageSize: 10, // 每頁顯示數量
            currentPageData: [] //當前頁顯示內容
         };
        },
mounted() {
// 計算一共有幾頁
        this.totalPage = Math.ceil(this.productList.length / this.pageSize);
// 計算得0時設置為1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
        this.setCurrentPageData();
},
methods: {
// 設置當前頁面數據，對數組操作的截取規則為[0~10],[10~20]...,
        setCurrentPageData() {
                let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.productList.slice(
                begin,
                end
                );
        },
//上一頁
prevPage() {
        console.log(this.currentPage);
        if (this.currentPage == 1) return;

        this.currentPage--;
        this.setCurrentPageData();

},
// 下一頁
nextPage() {
        if (this.currentPage == this.totalPage)return ;

        this.currentPage++;
        this.setCurrentPageData();

        }
 }
};