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项目动态设置background背景色，解决颜色被替换问题

vuejs下一页功能实现代码介绍

vuejs如何判断input是否失去焦点

wordpress文章nextpage分页最后添加“下一页”按钮

织梦cms模板分页列表显示前面和最后，中间用省略号

标签： vuejs功能, vuejs语法, 分页

上面是“vue前端分页功能实现代码（附js代码）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_16325.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！