效果图：
代码：
复制过去即可运行
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><!-- <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script><script type="text/javascript" th:src="@{/js/axios-0.18.0.js}"></script><script type="text/javascript" th:src="@{/js/vuejs-2.5.16.js}"></script><script type="text/javascript" th:src="@{/js/com.js}"></script>--><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app"><table border="1" cellspacing="0" cellpadding="0" width="80%"><tr><th>姓名</th><th>年龄</th><th>电话</th><th>网店</th></tr><tr v-for="(item, index) in dataShow" :class="{ 'alt': index%2==1 }"><td>{{ item.name }}</td><td>{{ item.age }}</td><td>{{ item.phone }}</td><td>{{ item.url }}</td></tr></table><table><tr><td><a href="#" @click="prePageFirst">首页</a><a href="#" @click="prePage">上一页</a><span v-for="(item, index) in pageNum"><a href="#" @click="toPage(index)" :class="{active: currentPage==index}"> {{ index+1 }} </a></span><a href="#" @click="nextPage">下一页</a><a href="#" @click="prePageLast">末页</a></td></tr></table>
</div>
<script>var vm = new Vue({el: '#app',data: {listArray:[{'name':'好人1','age':'18','phone':'WX:adam8831','url':'javacto.taobao.com'},{'name':'好人2','age':'19','phone':'adam8831','url':'javacto.taobao.com'},{'name':'好人3','age':'20','phone':'WX:adam8831','url':'javacto.taobao.com'},{'name':'好人4','age':'21','phone':'WX:adam8831','url':'javacto.taobao.com'},{'name':'好人5','age':'22','phone':'55555','url':'javacto.taobao.com'}],pageSize:3,currentPage:0},computed:{dataShow: function(){let start = this.currentPage*this.pageSize;let end = Math.min((this.currentPage+1)*this.pageSize, this.listArray.length)return this.listArray.slice(start, end)},pageNum: function(){return Math.ceil(this.listArray.length / this.pageSize) || 1 ;}},methods: {prePageFirst:function(){//首页var vm = this;vm.currentPage=0;},nextPage: function(){//下一页var vm = this;if (vm.currentPage == vm.pageNum - 1) return;vm.currentPage++;},prePage: function(){//上一页var vm = this;if (vm.currentPage == 0)return;vm.currentPage--;},prePageLast:function(){//末页var vm = this;vm.currentPage=vm.pageNum-1;},toPage: function(page){var vm = this;vm.currentPage = page}}})
</script></body>
</html>
