vue中实现简单的分页功能-逻辑附完整代码，效果展示

最新推荐文章于 2023-10-02 12:03:34 发布

面对疾风ba

最新推荐文章于 2023-10-02 12:03:34 发布

阅读量9.6k

点赞数 12

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/u011608672/article/details/114699582

版权

vue学习笔记专栏收录该内容

36 篇文章 4 订阅

订阅专栏

`效果展示：`

在这里插入图片描述

`实现`

vue分页主要是对数据的操作，针对前端的操作，需要确定以下的变量数据：
(不涉及前后台传值-----只是前端对数据的操作)

所有要分页的数据
每页显示多少条数据
共几页（所有数据/每页显示数据）
每页显示的数据
默认显示第一页内容

1、html的结构

<div id="app">

        <p v-for="item in dataShow" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}</p>

        <input type="button" value="上一页" @click="prePage">
        <span v-for="i in pageNum" @click="page(i)" :style="{cursor: 'pointer', margin:'10px'}">{{ i }}</span>
        <input type="button" value="下一页" @click="nextPage">
          
    </div>

2、data的模拟数据及变量数据

data:{
            data: [ //模拟的数据
                {id:1,name:'小明',age:12},
                {id:2,name:'小王',age:12},
                {id:3,name:'小李',age:12},
                {id:4,name:'小赵',age:12},
                {id:5,name:'小黄',age:12},
                {id:6,name:'小刘',age:12},
                {id:7,name:'小张',age:12}
            ],
            totalPage: [], // 所有分页的数据
            pageSize: 2, // 每页显示数量
            pageNum: 1,  // 共几页=所有数据/每页现实数量     
            dataShow: [], // 当前显示的数据  
            currentPage: 0 // 默认当前显示第一页
          },

3、计算总共多少页的数据

使用：Math.ceil()向上取整

this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1

4、分割数据，以数组的形式存入`totalPage`数组中

使用slice方法进行分割

			// 循环页面
            for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为2， 则第一页是1-2条，即slice(0,2)，第二页是3-4条，即slice(3,4)以此类推
            this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            }

5、默认显示第一页数据

// 获取到数据后默认显示第一页内容
this.dataShow = this.totalPage[this.currentPage];

6、上一页下一页，只需要切换`currentPage`的值，修改当前页显示数据就可以

 			// 下一页
            nextPage() {
              if (this.currentPage === this.pageNum - 1) return ;
              this.dataShow = this.totalPage[++this.currentPage];
            },
            // 上一页
            prePage() {
              if (this.currentPage === 0) return ;
              this.dataShow = this.totalPage[--this.currentPage];
            }

7、通过点击页码进行修改`currentPage`的值,来修改当前页显示数据

			// 点击页码，i是通过指令传递过来的值
            page(i){
                this.currentPage = i
                this.dataShow = this.totalPage[i-1];
            }

`到这里已经基本的完成来所有的步骤，可以进行简单的页面切换，下面贴上完整的代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <div id="app">
		
        <p v-for="item in dataShow" :key="item.id">{{item.id}}---{{item.name}}---{{item.age}}</p>

        <input type="button" value="上一页" @click="prePage">
        <span v-for="i in pageNum" @click="page(i)" :style="{cursor: 'pointer', margin:'10px'}">{{ i }}</span>
        <input type="button" value="下一页" @click="nextPage">
          
    </div>

    <script>

      var vm = new Vue({
          el:'#app',
          data:{
            data: [ //模拟数据
                {id:1,name:'小明',age:12},
                {id:2,name:'小王',age:12},
                {id:3,name:'小李',age:12},
                {id:4,name:'小赵',age:12},
                {id:5,name:'小黄',age:12},
                {id:6,name:'小刘',age:12},
                {id:7,name:'小张',age:12}
            ],
            totalPage: [], // 所有分页的数据
            pageSize: 2, // 每页显示数量
            pageNum: 1,  // 共几页=所有数据/每页现实数量     
            dataShow: [], // 当前显示的数据  
            currentPage: 0 // 默认当前显示第一页
          },
          created(){
            this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1

            // 循环页面
            for (let i = 0; i < this.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为2， 则第一页是1-2条，即slice(0,2)，第二页是3-4条，即slice(3,4)以此类推
            this.totalPage[i] = this.data.slice(this.pageSize * i, this.pageSize * (i + 1))
            }

            // 获取到数据后默认显示第一页内容
            this.dataShow = this.totalPage[this.currentPage];

          },
          methods:{
            // 下一页
            nextPage() {
              if (this.currentPage === this.pageNum - 1) return ;
              this.dataShow = this.totalPage[++this.currentPage];
            },
            // 上一页
            prePage() {
              if (this.currentPage === 0) return ;
              this.dataShow = this.totalPage[--this.currentPage];
            },
            // 点击页码
            page(i){
                this.currentPage = i
                this.dataShow = this.totalPage[i-1];
            }
        
          }
      })

    </script>
</body>
</html>

面对疾风ba

关注

12
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
vue中实现简单的分页功能-逻辑附完整代码，效果展示

效果展示：实现vue分页主要是对数据的操作，针对前端的操作，需要确定以下的变量数据：(不涉及前后台传值-----只是前端对数据的操作)所有要分页的数据每页显示多少条数据共几页（所有数据/每页显示数据）每页显示的数据默认显示第一页内容1、html的结构<div id="app"> <p v-for="item in dataShow" :key="item.id">{{item.id}}---{{item.name}}---{{item.ag
复制链接

扫一扫