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

具体实现代码如下：

<template>  
  <div>  
    <ul>  
      <li v-for="item in currentPageData" :key="item.id">{{ item.name }}</li>  
    </ul>  
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>  
  </div>  
</template>  
   
<script>  
export default {  
  data() {  
    return {  
      currentPage: 1, // 当前页码  
      pageSize: 10, // 每页显示的数量  
      totalData: [], // 总数据  
      currentPageData: [] // 当前页数据  
    };  
  },  
  computed: {  
    totalPages() {  
      return Math.ceil(this.totalData.length / this.pageSize); // 总页数  
    }  
  },  
  methods: {  
    fetchData() {  
      // 向后端发送请求获取数据，并将数据存储在totalData中  
      axios.get('/api/data', {  
        params: {  
          page: this.currentPage,  
          size: this.pageSize  
        }  
      }).then(response => {  
        this.totalData = response.data;  
        this.currentPageData = response.data.slice((this.currentPage - 1) * 
this.pageSize, this.currentPage * this.pageSize);  
      });  
    },  
    nextPage() {  
      if (this.currentPage < this.totalPages) {  
        this.currentPage++; // 更新当前页码  
        this.fetchData(); // 重新获取数据  
      }  
    }  
  },  
  mounted() {  
    this.fetchData(); // 在组件挂载时获取数据  
  }  
};  
</script>

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

标签： vuejs下一页, vuejs功能

上面是“vuejs下一页功能实现代码介绍”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

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

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