让我写一个vue的分页器的代码
时间: 2023-02-25 16:49:47 浏览: 85
用Vue写一个分页器的示例代码
好的,这是一份简单的 Vue 分页器代码示例:
```
<template>
<div>
<button @click="prevPage">上一页</button>
<button @click="nextPage">下一页</button>
<ul>
<li v-for="item in currentPageData" :key="item.id">{{ item.text }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
perPage: 5,
data: [
{ id: 1, text: "数据 1" },
{ id: 2, text: "数据 2" },
{ id: 3, text: "数据 3" },
{ id: 4, text: "数据 4" },
{ id: 5, text: "数据 5" },
{ id: 6, text: "数据 6" },
{ id: 7, text: "数据 7" },
{ id: 8, text: "数据 8" },
{ id: 9, text: "数据 9" },
{ id: 10, text: "数据 10" }
]
};
},
computed: {
currentPageData() {
const start = (this.currentPage - 1) * this.perPage;
return this.data.slice(start, start + this.perPage);
}
},
methods: {
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
if (this.currentPage < Math.ceil(this.data.length / this.perPage)) {
this.currentPage++;
}
}
}
};
</script>
```
希望这对你有所帮助!
阅读全文