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();

        }
 }
};