分页功能
2020-10-15 本文已影响0人
lucky_yao
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>分页</title>
<style>
.pagetion a {
padding: 4px 12px;
border: 1px solid royalblue;
text-decoration: none;
}
.pagetion a.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in showitems" :key="item.id">{{item.username}}</li>
</ul>
<k-page
:pages="upages"
:page="Upage"
@preave="preave"
@change="change"
></k-page>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component("k-page", {
props: ["pages", "page"],
template: `
<div class="pagetion">
<a href="javascript:;" @click="up">上一页</a>
<a href="" v-for="p of pages" @click.prevent="gotoPage(p)" :class="{'active' : p===page}">{{p}}</a>
<a href="javascript:;" @click="down">下一页</a>
</div>`,
methods: {
gotoPage(p) {
this.$emit("change", p);
},
up() {
if (this.page - 1 > 0) {
this.$emit("change", this.page - 1);
}
},
down() {
this.$emit("preave", this.page + 1);
},
},
});
let app = new Vue({
el: "#app",
data: {
items: [
{ id: 1, username: "王一博" },
{ id: 2, username: "肖战" },
{ id: 3, username: "李现" },
{ id: 4, username: "孙可乐" },
{ id: 5, username: "易大千" },
{ id: 6, username: "陈晓" },
{ id: 7, username: "易烊千玺" },
{ id: 8, username: "王源" },
{ id: 9, username: "王俊凯" },
{ id: 10, username: "蓝忘机" },
{ id: 11, username: "魏无羡" },
{ id: 12, username: "刘昊然" },
{ id: 13, username: "邓伦" },
{ id: 14, username: "黄明昊" },
],
Upage: 1, //第几页
prePage: 3, //一页显示几个
},
computed: {
upages() {
//总页数
return Math.ceil(this.items.length / this.prePage);
},
showitems() {
let start = (this.Upage - 1) * this.prePage;
// slice(start,end)
return this.items.slice(start, start + this.prePage);
},
},
methods: {
change(page) {
this.Upage = page;
},
preave(page) {
if (page - 1 < this.items.length / this.prePage) {
this.Upage = page;
}
},
},
});
</script>
</html>
