當(dāng)我們需要展示多個(gè)數(shù)據(jù)時(shí)，通常會(huì)使用分頁功能。但有時(shí)候，我們也需要讓用戶自由地瀏覽所有數(shù)據(jù)，這就需要使用 Load More 功能。Vue.js 可以很方便地實(shí)現(xiàn) Load More 功能，下面將簡單介紹如何使用。

首先，在 Vue 組件的 data() 中定義一個(gè)變量 limit，這個(gè)變量代表每次加載的數(shù)據(jù)量：

data() {
return {
limit: 10,
dataList: []
}
}

接下來，我們需要?jiǎng)?chuàng)建兩個(gè)方法，一個(gè)是 loadMore()，用來加載更多數(shù)據(jù)，另一個(gè)是 hasMore()，用來判斷是否還有更多數(shù)據(jù)可以加載。

methods: {
loadMore() {
this.limit += 10
},
hasMore() {
return this.limit <= this.dataList.length
}
}

在模板中，我們需要使用 v-for 來遍歷 dataList 數(shù)組，并使用 v-if 和 hasMore() 方法判斷是否需要顯示 Load More 按鈕：

<div v-for="data in dataList" :key="data.id">
<p>{{ data.title }}</p>
<p>{{ data.content }}</p>
</div>
<button v-if="hasMore()" @click="loadMore()">Load More</button>

最后，我們只需要在 mounted() 鉤子函數(shù)中，通過 API 或其他方式獲取數(shù)據(jù)，并將數(shù)據(jù)保存到 dataList 數(shù)組中即可。