vue-cli的分页实例代码

可以参考以下代码：

<template>
<div>
<ul class="pagination">
<li :class="{ 'disabled': currentPage === 1 }">
<a @click="prevPage()" href="#">Previous</a>
</li>
<li v-for="page in pages" :key="page" :class="{ 'active': currentPage === page }">
<a @click="changePage(page)" href="#">{{ page }}</a>
</li>
<li :class="{ 'disabled': currentPage === totalPages }">
<a @click="nextPage()" href="#">Next</a>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
currentPage: 1,
itemsPerPage: 10,
totalItems: 100
}
},
computed: {
pages() {
const totalPages = Math.ceil(this.totalItems / this.itemsPerPage)
const pagesArray = []
for (let i = 1; i <= totalPages; i++) {
pagesArray.push(i)
}
return pagesArray
},
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage)
}
},
methods: {
changePage(page) {
this.currentPage = page
},
prevPage() {
if (this.currentPage > 1) {
this.currentPage--
}
},
nextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++
}
}
}
}
</script>