vue實現一個簡單的分頁功能

• 記錄一下vue學習
• 之前看過別人文章，只是一個分頁樣式，這樣對像我這種初學者來說幫助幾乎為零，所以我這里寫了一個完整的分頁，希望可以幫助像我一樣的初學者
• 這是一個帶有數據的完整分頁功能，但缺點是頁數過多會造成分頁區放不下顯示頁碼，
• 不過別急，下一篇解決這個問題
• 保姆級代碼，復制直接就能用，話不多說，上代碼

.nav{width: 550px;height: 30px;background-color: pink;display: flex;align-items: center;}div[class$=Page]{width: 80px; height: 25px;text-align: center;color: black;line-height:25px;background-color: coral;margin: 0 5px;}div[class=pages]{width: 25px;height: 25px;border: 1px solid #c3c3c3;border-radius: 5px;margin: 0 5px;background-color: rgb(236, 235, 235);text-align: center;line-height: 25px;}.active{width: 25px;height: 25px;border: 1px solid #8f8f8f;border-radius: 5px;margin: 0 5px;background-color: rgb(247, 113, 23);text-align: center;line-height: 25px;color: #fff;}.nav div:hover{cursor: pointer;}.box{width: 550px;height: 200px;border: 1px solid #eee;background-color: #f5f5f5;} <div id="app"><div class="box"><div class="item" v-for="(item,index) in showPage">{{item}}</div></div><div class="nav"><div class="pravPage" @click="prav">上一頁</div><div class="pages" v-for="(item,index) in conpages" :key="index" @click="page(item)":class="item==cur?'active':''" >{{item}}</div><div class="nextPage" @click="next">下一頁</div></div></div> var app = new Vue({el: '#app',data: {conpages:'',//總頁數cur:1, //當前頁pageSize:3, //每頁要展示數據條數showPage:[],//每頁展示的內容porps:["小鼠","小貓","小狗","小花","小草","小樹","小明","小李","小王","我"] //總數據},created(){this.conpages = Math.ceil(this.porps.length/this.pageSize); //求總頁數，Math.ceil()方法 可以對數進行上舍入this.page(this.cur)},methods:{page(item){this.cur=item; //當前頁var list = (this.cur-1)*this.pageSize; //每去一組數據的第一個索引this.showPage = this.porps.slice(list,list+this.pageSize); //從總數據中取出每頁的數據},prav(){if(this.cur!=1){this.cur--this.page(this.cur)}},next(){if(this.cur<this.conpages){this.cur++this.page(this.cur)}}}})

• 最終效果是這樣
• 點擊會切換頁面，因為我不會制作動圖，所以就無法演示，如果有知道的請告訴哈我，謝謝

總結

以上是生活随笔為你收集整理的vue实现分页功能之最详细篇（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。