vue实现手动翻页代码
时间: 2023-09-10 11:06:52 浏览: 45
实现手动翻页的代码可以分为以下几个步骤:
1. 在 Vue 组件中定义一个数组,用于存储所有需要显示的数据。
2. 定义一个变量,用于记录当前页数。
3. 根据每页显示的数据条数,计算出总页数。
4. 在页面中显示当前页数和总页数,并根据当前页数和每页显示的数据条数,计算出需要显示哪些数据。
5. 点击翻页按钮时,更新当前页数,并重新计算需要显示哪些数据。
下面是一个简单的实现示例:
```html
<template>
<div class="pagination-demo">
<div class="data-list">
<ul>
<li v-for="item in currentData" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<div class="pagination">
<span>当前页数:{{ currentPage }}</span>
<span>总页数:{{ totalPages }}</span>
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{ id: 1, name: '数据1' },
{ id: 2, name: '数据2' },
{ id: 3, name: '数据3' },
{ id: 4, name: '数据4' },
{ id: 5, name: '数据5' },
{ id: 6, name: '数据6' },
{ id: 7, name: '数据7' },
{ id: 8, name: '数据8' },
{ id: 9, name: '数据9' },
{ id: 10, name: '数据10' },
{ id: 11, name: '数据11' },
{ id: 12, name: '数据12' },
{ id: 13, name: '数据13' },
{ id: 14, name: '数据14' },
{ id: 15, name: '数据15' },
{ id: 16, name: '数据16' },
{ id: 17, name: '数据17' },
{ id: 18, name: '数据18' },
{ id: 19, name: '数据19' },
{ id: 20, name: '数据20' },
],
currentPage: 1,
pageSize: 5,
};
},
computed: {
currentData() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.dataList.slice(start, end);
},
totalPages() {
return Math.ceil(this.dataList.length / this.pageSize);
},
},
methods: {
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
},
};
</script>
<style>
.pagination-demo {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.data-list {
margin-bottom: 20px;
}
.data-list ul {
list-style: none;
padding-left: 0;
}
.pagination {
display: flex;
align-items: center;
}
.pagination span {
margin-right: 10px;
}
.pagination button {
margin-right: 10px;
}
</style>
```
在上述代码中,我们定义了一个包含20条数据的数组 `dataList`,每页显示5条数据。在 `computed` 中,我们计算出了总页数和当前需要显示的数据,并在页面中显示当前页数和总页数。在 `methods` 中,我们定义了翻页按钮的点击事件,用于更新当前页数并重新计算需要显示的数据。