當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 分页

發布時間：2024/1/1 vue 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 分页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

分頁效果實現

思路：
1.每頁顯示的數量
2.當前頁數
3,總頁數 , 總頁數放在computed中計算放在頁面 splice截取數組元素

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分頁</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.pagination {margin: 20px 0;}.pagination a {padding: 5px 15px;border: 1px solid yellowgreen;text-decoration: none;margin: 5px;}/* 點按鈕變色這里只是提前寫好樣式如果為true在會變色 */.pagination a.active {background : #3ba9ff;color: white;}</style> </head> <body><div id="app"><ul><li v-for="user in newUser":key="user.id">{{user.name}}</li> </ul> <p-pagination :pages=showUsers @click-pag="fn" :page = 'uPage'> </p-pagination> </div><script>Vue.component("p-pagination",{template: `<div class="pagination"> <a href="javascript:;" @click='deduction'>上一頁</a> <a href="javascript:;" v-for="pag in pages" @click="goto(pag)" :class="{active: pag === page}">{{pag}}</a><a href="javascript:;" @click='score'>下一頁</a> </div> `,props:['pages','page'],//接收參數 methods: {goto(pag){ //點擊按鈕給父組件傳參這里的參數也可以直接使用pagthis.$emit("click-pag",pag);// console.log(this.pages);console.log(this.page) },// 上一頁deduction(){if(this.page - 1 >0){ this.$emit("click-pag",this.page-1);}else{this.page = 1} }, // 下一頁score(){ //若果是最后一頁 if(this.page >= this.pages ){ this.page = this.pages }else{this.$emit("click-pag",this.page+1); } },}});let app = new Vue({el:"#app",data:{users:[{id:1,name:'小王'},{id:2,name:'小紅'},{id:3,name:'小明'},{id:4,name:'小麗'},{id:5,name:'小東'},{id:6,name:'小花'},{id:7,name:'小李'}, ],uPage:1, //當前頁perPage:2, //每頁顯示多少條},computed: {// 獲取總頁數 showUsers:{ get(){return Math.ceil(this.users.length / this.perPage); }},newUser:{ //渲染到頁面get(){ // 分割數據return JSON.parse(JSON.stringify(this.users)).splice((this.uPage-1)*this.perPage , this.perPage)}},},methods: {fn(n){// console.log(n)this.uPage = n; //接收到子組件傳過來的數據修改data的顯示},}, });</script> </body> </html>

總結

以上是生活随笔為你收集整理的vue 分页的全部內容，希望文章能夠幫你解決所遇到的問題。

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

分页
Vue