效果图:
代码:
复制过去即可运行
<!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>