<!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>