vue中实现简单的分页功能-逻辑附完整代码,效果展示
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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战