要获取Vue中当前页码,需要明确分页组件的结构以及分页器的实现方式。在分页组件的结构中,通常包含一个列表数据、页码总数、当前页码、每页显示的数据条数等必要参数。
export default {
data() {
return {
list: [],
total: 0,
currentPage: 1,
pageSize: 5
}
}
}
以上代码表示一个Vue的分页组件数据结构,其中list表示要分页的列表数据,total表示数据总数,currentPage表示当前页码,pageSize则表示每页显示数据条数。
首先,需要根据列表数据的总数total以及每页显示数据条数pageSize,计算出总页数pageCount。这可以使用计算属性computed来实现:
computed: {
pageCount() {
return Math.ceil(this.total / this.pageSize)
}
}
接下来,需要在组件中实现获取当前页码的方法。这可以利用Vue的路由机制来实现,或者使用自己实现的分页器组件来实现。
使用Vue路由机制实现:
<template>
<div>
<ul>
<li v-for="page in pageCount" :key="page">
<router-link
:to="{name: 'list', params: {page: page}}"
:class="{active: page === currentPage}"
>
{{ page }}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
currentPage() {
return Number(this.$route.params.page) || 1
}
}
}
</script>
以上代码中,将分页的链接作为router-link来实现,参数page为当前页码。利用computed计算属性,获取路由参数中的当前页码。
使用自己实现的分页器组件来实现:
<template>
<div>
<ul>
<li v-for="page in pageCount" :key="page">
<a
:class="{active: page === currentPage}"
@click.prevent="goTo(page)"
>
{{ page }}
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
methods: {
goTo(page) {
this.currentPage = page
}
}
}
</script>
以上代码中,分页按钮使用a标签实现,并绑定点击事件。在methods中定义goTo方法,将点击的页面数赋值为currentPage。值得注意的是,若要使用这个方式实现,需要将currentPage也定义为data中的数据,并在goTo方法中设置为响应式属性,否则页面无法正确更新。
以上就是获取Vue中当前页码的两种实现方式,根据实际需求选择相应的方法即可。