Vue和jQuery都是前端開發中常用的工具。在實際項目中，分頁功能的實現也是非常常見的需求之一。下面介紹如何運用Vue和jQuery分別實現分頁功能。

首先是使用Vue實現分頁：

//html
{{ page }}
//js
new Vue({
el: '#app',
data: {
total: 50,//總數據量
pageSize: 10,//每頁顯示的數據量
current: 1,//當前頁數
pages: []//分頁數據
},
methods: {
initPages() {//初始化分頁數據
this.pages = [];
let pageCount = Math.ceil(this.total / this.pageSize);
for (let i = 1; i<= pageCount; i++) {
this.pages.push(i);
}
},
changePage(page) {//選擇頁碼
if (this.current !== page) {
this.current = page;
}
}
},
created() {
this.initPages();
}
});

上述代碼中，通過Vue的for循環實現分頁數據的展示，并通過綁定class實現當前頁碼的高亮效果。通過initPages方法初始化全部頁碼，changePage方法實現切換頁碼的邏輯。

接下來是使用jQuery實現分頁：

//html
//js
$(function () {
let total = 50;//總數據量
let pageSize = 10;//每頁顯示的數據量
let current = 1;//當前頁數
let pageCount = Math.ceil(total / pageSize);//總頁數
let pagesHtml = '';//分頁html
for (let i = 1; i<= pageCount; i++) {
pagesHtml += '
' + i + '
';
}
$('#pages').html(pagesHtml);
$('#pages').on('click', 'li', function () {//綁定選擇頁碼事件
let page = $(this).text();
if (current !== page) {
current = page;
$(this).addClass('active').siblings().removeClass('active');
}
});
});

上述代碼中，通過jQuery動態生成分頁數據的html，利用addClass和removeClass實現當前頁碼的高亮效果。通過on方法實現綁定選擇頁碼的事件。