在網(wǎng)頁應(yīng)用中，列表是非常常見的一個組件，但是當列表過多時，可能就需要進行分頁操作，以便提高用戶體驗。在 Vue 中，我們可以方便地實現(xiàn)列表加翻頁的功能。

首先，我們需要定義一個包含所有數(shù)據(jù)的數(shù)組，以及每頁所顯示的數(shù)據(jù)量，通常為10或20條。接著，我們需要使用計算屬性來確定當前所在頁碼，以及總頁數(shù)。具體代碼如下：

// 數(shù)據(jù)列表
data() {
return {
list: [
{
id: 1,
name: '張三',
age: 20
},
{
id: 2,
name: '李四',
age: 25
},
...
{
id: 100,
name: '王五',
age: 30
}
],
pageSize: 10,
currentPage: 1
}
},
// 分頁計算屬性
computed: {
total() {
return Math.ceil(this.list.length / this.pageSize)
},
currentList() {
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
return this.list.slice(start, end)
}
},

在上面的代碼中，total 屬性表示總頁數(shù)，currentList 屬性表示當前頁所需顯示的數(shù)據(jù)。我們通過計算屬性實現(xiàn)了分頁的邏輯。

下面是 HTML 代碼，我們使用 v-for 循環(huán) currentList 屬性來顯示分頁后的數(shù)據(jù)。同時，我們使用 v-if 和 v-else 分別顯示上一頁和下一頁按鈕，以及當前頁和總頁數(shù)的信息。

<div v-for="item in currentList" :key="item.id">
<p>{{ item.name }}，{{ item.age }}歲</p>
</div>
<p v-if="currentPage >1" @click="currentPage--">上一頁</p>
<p v-else>第一頁</p>
<p>第{{ currentPage }}頁，共{{ total }}頁</p>
<p v-if="currentPage< total" @click="currentPage++">下一頁</p>
<p v-else>最后一頁</p>

最后，在 Vue 的實例中，定義一個方法 handlePageChange，用于處理點擊上一頁或下一頁時的業(yè)務(wù)邏輯。具體代碼如下：

methods: {
handlePageChange() {
// 處理分頁邏輯
}
}

以上就是實現(xiàn) Vue 列表加翻頁的全部代碼及邏輯。通過計算屬性和方法，我們可以實現(xiàn)分頁功能，提高用戶體驗。