快捷導(dǎo)航

vue實現(xiàn)簡單分頁功能

更新時間：2022年03月04日 10:11:33 作者：斜影梧桐

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單的分頁功能的具體代碼，供大家參考，具體內(nèi)容如下

<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, //所有頁數(shù)，默認為1
? ? ? ? ? ? currentPage: 1, // 當前頁數(shù)，默認為1
? ? ? ? ? ? pageSize: 9, //每頁顯示條數(shù)
? ? ? ? ? ? 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], ?//頁面數(shù)據(jù)
? ? ? ? ? ? currentPageData: [] ?// 當前頁顯示內(nèi)容
? ? ? ? }
? ? },
? ? mounted(){
? ? ? ? // 計算一共有幾頁
? ? ? ? this.totalPage = Math.ceil(this.classInfo.length / this.pageSize)
? ? ? ? // 計算得0時設(shè)置為1
? ? ? ? this.totalPage = this.totalPage == 0 ? 1:this.totalPage
? ? ? ? this.setCurrentPageData();
? ? },
? ? methods: {
? ? ? ? // 設(shè)置當前頁面數(shù)據(jù)
? ? ? ? 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>

效果圖：