vue前端分页功能实现代码（附js代码）

功能介绍：不利于后端接口，前端如何实现分页，下面给大家简单介绍一下js代码，html语法自己理解一下！

具体实现代码如下：

export default {
  data() {
    return {
      productList: [], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页
      pageSize: 10, // 每页显示条数
      currentPageData: [] //当前页显示内容
    };
  },
  mounted() {
    
    this.totalPage = Math.ceil(this.productList.length / this.pageSize);// 计算一共有几页

    this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
    this.setCurrentPageData();
  },
  methods: {
     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();
      
    }
  }
}

以上是编程学习网小编为您介绍的“vue前端分页功能实现代码（附js代码）”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。