Vue是一款流行的前端框架，它可以輕松地將數據和視圖綁定在一起。為了方便展示大量數據，通常需要使用分頁功能。而Vue自動分頁就是一種簡單而有效的方法，可以在列表中自動分頁展示數據。

首先，我們需要一個包含多條數據的列表。以以下JSON格式為例：

[
{
"id": 1,
"name": "Tom",
"age": 20
},
{
"id": 2,
"name": "Jerry",
"age": 18
},
{
"id": 3,
"name": "Lucy",
"age": 25
},
//...
]

接下來，我們需要定義一些變量和方法，用于動態控制分頁。在Vue實例的data對象中添加以下屬性：

data: {
pageSize: 5, //每頁數據條數
currentPage: 1, //當前頁碼
items: [] //數據列表
},

然后，定義一個computed屬性，用于計算總頁數。代碼如下：

computed: {
pageCount: function() {
return Math.ceil(this.items.length / this.pageSize);
}
},

這個計算屬性將根據列表數據的數量和每頁展示的數據條數，計算出總頁數。使用Math.ceil()方法可以確保總頁數為整數。

接下來，我們編寫一個方法，用于獲取當前頁碼對應的數據。方法如下：

methods: {
getPageData: function() {
var start = (this.currentPage - 1) * this.pageSize;
var end = start + this.pageSize;
return this.items.slice(start, end);
}
},

這個方法將根據當前頁碼和每頁展示的數據條數，計算出在列表中需要展示的數據，并返回一個新數組。

最后，在頁面中使用v-for指令來循環展示數據。代碼如下：

<div v-for="item in getPageData()">
<span>{{item.id}}</span>
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</div>

這個指令將循環展示getPageData()方法返回的數據，即當前頁碼對應的數據。

使用Vue自動分頁，讓我們可以方便地展示大量數據，并提高數據的展示效果。