vue中实现简单的分页功能-逻辑附完整代码，效果展示
实现
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、计算总共多少页的数据
this.pageNum = Math.ceil(this.data.length / this.pageSize) || 1;//计算有多少页数据，默认为1
4、分割数据，以数组的形式存入totalPage数组中
// 循环页面
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>