上下翻頁是網站中常見的功能之一，可以讓用戶更方便地瀏覽內容。而Vue作為一款現代化的JavaScript框架，也可以輕松地實現上下翻頁功能。
Vue.component('pagination', {
props: {
items: {
type: Array,
required: true,
},
pageSize: {
type: Number,
default: 10,
},
},
data() {
return {
currentPage: 1,
};
},
computed: {
pageCount() {
let l = this.items.length,
s = this.pageSize;
return Math.ceil(l / s);
},
paginatedData() {
const start = (this.currentPage - 1) * this.pageSize,
end = start + this.pageSize;
return this.items.slice(start, end);
}
},
methods: {
nextPage() {
this.currentPage++;
},
prevPage() {
this.currentPage--;
},
setPage(pageNumber) {
this.currentPage = pageNumber;
}
},
template: ``,
});這是一個Vue組件，可以將其嵌入到項目中，并傳入items數組和pageSize屬性。items數組是需要進行分頁的數據，pageSize是每頁顯示的條數，默認為10。
計算屬性pageCount通過items數組和pageSize屬性計算出總頁數。
另外一個計算屬性paginatedData則通過currentPage和pageSize計算出當前頁需要顯示的數據。
組件中有三個方法，nextPage和prevPage分別用于切換到下一頁和上一頁，setPage用于手動設置當前頁。
最后，組件中的模板使用了一個div包裹，里面有三個button，分別用于切換到上一頁、下一頁以及手動設置當前頁。通過v-for指令動態渲染按鈕，并給當前頁的按鈕應用active樣式。
這樣，只需引入此組件并進行必要的配置，就能輕松地實現上下翻頁功能了。