Vue.js 是一個流行的 JavaScript 框架，它可以幫助開發人員構建高性能的 Web 應用程序。其中一個常見的需求是實現分頁。Vue.js 提供了一些有用的工具以簡化這個任務，并使分頁代碼更易于維護。

<template>
<div>
<ul>
<li v-for="pageNumber in totalPages" :key="pageNumber">
<a href="#" @click.prevent="changePage(pageNumber)" :class="{ active: pageNumber === currentPage }">
{{ pageNumber }}
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
items: [],
currentPage: 1,
itemsPerPage: 10
}
},
computed: {
totalPages () {
return Math.ceil(this.items.length / this.itemsPerPage)
},
paginatedItems () {
const start = (this.currentPage - 1) * this.itemsPerPage
const end = start + this.itemsPerPage
return this.items.slice(start, end)
}
},
methods: {
changePage (page) {
this.currentPage = page
}
}
}
</script>

在上面的代碼中，我們定義了一個分頁組件，該組件顯示可點擊的頁號列表。該組件的狀態（例如當前頁號）存儲在數據對象中。父組件通過傳遞一個數組或從 API 獲取數據作為 prop 將數據傳遞到該組件。我們使用 computed 屬性來計算在當前頁（currentPage）顯示的項目（paginatedItems）。

當用戶點擊頁號時，我們調用 changePage 方法來更新當前頁號。這將觸發 computed 屬性的重新計算，以便我們更新 paginatedItems。

Vue.js 提供了非常方便的工具來處理分頁，其中包括計算屬性和條件渲染。這樣，我們就可以快速創建分頁組件，使用戶可以輕松導航到數據集的不同部分。