生活随笔
收集整理的這篇文章主要介紹了
vue 分页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
分頁效果實(shí)現(xiàn)
思路：
1.每頁顯示的數(shù)量
2.當(dāng)前頁數(shù)
3,總頁數(shù) , 總頁數(shù)放在computed中計(jì)算 放在頁面 splice截取數(shù)組元素
<!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
;}.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
><!-- 這里綁定總頁數(shù) 父組件傳過來參數(shù) 復(fù)用件接收后判斷如果為
true執(zhí)行css樣式
--> <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
){ this.$emit("click-pag",pag
);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
){this.uPage
= n
; },}, });</script
>
</body
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的vue 分页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
