vue.js-列表分页
Posted 你想要怎样生活，完全由你自己决定。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js-列表分页相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-列表分页</title>
<script src="js/vue.js"></script>
<script src="js/jquery.js"></script>
<style>
body {
font-family: "Segoe UI";
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.pagination {
position: relative;
}
.pagination li {
display: inline-block;
margin: 0 5px;
}
.pagination li a {
padding: .5rem 1rem;
display: inline-block;
border: 1px solid #ddd;
background: #fff;
color: #0E90D2;
}
.pagination li a:hover {
background: #eee;
}
.pagination li.active a {
background: #0E90D2;
color: #fff;
}
table,
td {
border: 1px solid #cccccc;
border-collapse: collapse;
}
table {
width: 1090px;
margin: 20px auto;
}
tr {
line-height: 30px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<script type="text/x-template" id="page">
<ul class="pagination">
<li v-show="current != 1" @click="current-- && goto(current--)">
<a href="#">上一页</a>
</li>
<li v-for="index in pages" @click="goto(index)" :class="{‘active‘:current == index}" :key="index">
<a href="#">{{index}}</a>
</li>
<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
<a href="#">下一页</a>
</li>
</ul>
</script>
<div id="app">
<table border="1">
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
<tr v-for="books in book">
<td>{{books.id}}</td>
<td>{{books.name}}</td>
<td>{{books.author}}</td>
<td>{{books.price}}</td>
</tr>
</table>
<page></page>
</div>
<script>
Vue.component("page", {
template: "#page",
data: function() {
return {
current: 1,
showItem: 5,
allpage: 2
}
},
computed: {
pages: function() {
var pag = [];
if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem, this.allpage);
while(i) {
pag.unshift(i--);
}
} else { //当前页数大于显示页数了
var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
i = this.showItem;
if(middle > (this.allpage - this.showItem)) {
middle = (this.allpage - this.showItem) + 1
}
while(i--) {
pag.push(middle++);
}
}
return pag
}
},
methods: {
goto: function(index) {
if(index == this.current) return;
this.current = index;
//这里可以发送ajax请求
console.log(index);
$.ajax({
type: "get",
url: ‘‘ + index + ‘.json‘,
dataType: "json",
success: function(data) {
vm.book = data.books;
console.log(vm.book)
}
});
}
},
mounted: function() {
var index = 1;
$.ajax({
type: "get",
url: ‘‘ + index + ‘.json‘,
dataType: "json",
success: function(data) {
vm.book = data.books;
console.log(vm.book)
}
});
}
})
var vm = new Vue({
el: ‘#app‘,
data: {
book: ‘‘
}
})
</script>
</body>
</html>
以上是关于vue.js-列表分页的主要内容，如果未能解决你的问题，请参考以下文章
[DIV/CSS] Vue.js 开发实践：实现精巧的无限加载与分页功能