vue实现简单分页功能
作者：斜影梧桐
这篇文章主要为大家详细介绍了vue实现简单分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现简单的分页功能的具体代码，供大家参考，具体内容如下
<template>
<div id="pages">
<div class="pages">
<div class="classInfo" v-for="(item,index) in currentPageData" :key="index">
{{item}}
</div>
<div class="img1" @click="prevPage()"></div>
<div class="img2" @click="nextPage()"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
totalPage: 1, //所有页数，默认为1
currentPage: 1, // 当前页数，默认为1
pageSize: 9, //每页显示条数
classInfo: [11,12,13,14,15,16,17,18,19,1,2,3,4,5,6,5,6,11,7,8,9,5,4,5,4,5], //页面数据
currentPageData: [] // 当前页显示内容
}
},
mounted(){
// 计算一共有几页
this.totalPage = Math.ceil(this.classInfo.length / this.pageSize)
// 计算得0时设置为1
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;
// console.log(begin)
// console.log(end)
this.currentPageData = this.classInfo.slice(
begin,
end
)
// console.log(this.currentPageData)
},
// 上一页
prevPage(){
// console.log(this.currentPage)
if(this.curentPage == 1) return
this.currentPage--;
this.setCurrentPageData();
},
// 下一页
nextPage(){
// console.log(this.currentPage)
if(this.curentPage == this.totalPage) return
this.currentPage++
this.setCurrentPageData()
}
}
}
</script>
<style lang="less" scoped>
#pages{
// background-color: #fff;
.pages{
margin: 0 auto;
width: 600px;
height: 600px;
// background-color: rgb(64, 180, 80);
z-index: 999;
.classInfo{
font-size: 25px;
color: aliceblue;
z-index: 999;
}
.img1{
width: 150px;
height: 50px;
background-color: rgb(189, 111, 111);
}
.img2{
width: 150px;
height: 50px;
background-color: rgb(41, 94, 110);
}
}
}
</style>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。