vue实现简易分页器,单击第"2"页时出现上一页
时间: 2023-12-06 08:02:34 浏览: 63
Vue实现简单分页器
可以通过Vue来实现一个简易的分页器,下面是一个示例:
```html
<template>
<div>
<div v-for="page in pages" :key="page" @click="gotoPage(page)">
{{ page }}
</div>
<div v-if="currentPage > 1" @click="gotoPage(currentPage - 1)">
上一页
</div>
</div>
</template>
<script>
export default {
data() {
return {
total: 20, // 总页数
pageSize: 5, // 每页显示的条数
currentPage: 1, // 当前页码
};
},
computed: {
pages() {
const pageCount = Math.ceil(this.total / this.pageSize);
const pages = [];
for (let i = 1; i <= pageCount; i++) {
pages.push(i);
}
return pages;
},
},
methods: {
gotoPage(page) {
this.currentPage = page;
// 在这里触发加载数据的方法,传入当前页码和每页显示的条数
},
},
};
</script>
```
这个示例中,我们使用了一个`pages`计算属性来生成所有的页码。在模板中,我们使用`v-for`指令来循环渲染所有的页码,并且给每个页码添加了一个点击事件,当点击时会调用`gotoPage`方法跳转到对应的页码。同时,我们也添加了一个上一页的按钮,当当前页码大于1时才显示。
当用户单击第2页时,会触发`gotoPage`方法,将`currentPage`更新为2,然后再次渲染模板,此时上一页按钮就会显示出来。
阅读全文