1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>vue-列表分页</title>
  9. <script src="js/vue.js"></script>
  10. <script src="js/jquery.js"></script>
  11. <style>
  12. body {
  13. font-family: "Segoe UI";
  14. }
  15.  
  16. li {
  17. list-style: none;
  18. }
  19.  
  20. a {
  21. text-decoration: none;
  22. }
  23.  
  24. .pagination {
  25. position: relative;
  26. }
  27.  
  28. .pagination li {
  29. display: inline-block;
  30. margin: 0 5px;
  31. }
  32.  
  33. .pagination li a {
  34. padding: .5rem 1rem;
  35. display: inline-block;
  36. border: 1px solid #ddd;
  37. background: #fff;
  38. color: #0E90D2;
  39. }
  40.  
  41. .pagination li a:hover {
  42. background: #eee;
  43. }
  44.  
  45. .pagination li.active a {
  46. background: #0E90D2;
  47. color: #fff;
  48. }
  49.  
  50. table,
  51. td {
  52. border: 1px solid #cccccc;
  53. border-collapse: collapse;
  54. }
  55.  
  56. table {
  57. width: 1090px;
  58. margin: 20px auto;
  59. }
  60.  
  61. tr {
  62. line-height: 30px;
  63. }
  64.  
  65. td {
  66. text-align: center;
  67. }
  68. </style>
  69. </head>
  70.  
  71. <body>
  72.  
  73. <script type="text/x-template" id="page">
  74. <ul class="pagination">
  75. <li v-show="current != 1" @click="current-- && goto(current--)">
  76. <a href="#">上一页</a>
  77. </li>
  78. <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
  79. <a href="#">{{index}}</a>
  80. </li>
  81. <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
  82. <a href="#">下一页</a>
  83. </li>
  84. </ul>
  85. </script>
  86. <div id="app">
  87. <table border="1">
  88. <tr>
  89. <th>ID</th>
  90. <th>书名</th>
  91. <th>作者</th>
  92. <th>价格</th>
  93. </tr>
  94. <tr v-for="books in book">
  95. <td>{{books.id}}</td>
  96. <td>{{books.name}}</td>
  97. <td>{{books.author}}</td>
  98. <td>{{books.price}}</td>
  99. </tr>
  100. </table>
  101. <page></page>
  102. </div>
  103. <script>
  104. Vue.component("page", {
  105. template: "#page",
  106. data: function() {
  107. return {
  108. current: 1,
  109. showItem: 5,
  110. allpage: 2
  111. }
  112. },
  113. computed: {
  114. pages: function() {
  115. var pag = [];
  116. if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
  117. //总页数和要显示的条数那个大就显示多少条
  118. var i = Math.min(this.showItem, this.allpage);
  119. while(i) {
  120. pag.unshift(i--);
  121. }
  122. } else { //当前页数大于显示页数了
  123. var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
  124. i = this.showItem;
  125. if(middle > (this.allpage - this.showItem)) {
  126. middle = (this.allpage - this.showItem) + 1
  127. }
  128. while(i--) {
  129. pag.push(middle++);
  130. }
  131. }
  132. return pag
  133. }
  134. },
  135. methods: {
  136. goto: function(index) {
  137. if(index == this.current) return;
  138. this.current = index;
  139. //这里可以发送ajax请求
  140. console.log(index);
  141. $.ajax({
  142. type: "get",
  143. url: '' + index + '.json',
  144. dataType: "json",
  145. success: function(data) {
  146. vm.book = data.books;
  147. console.log(vm.book)
  148. }
  149. });
  150.  
  151. }
  152. },
  153. mounted: function() {
  154. var index = 1;
  155. $.ajax({
  156. type: "get",
  157. url: '' + index + '.json',
  158. dataType: "json",
  159. success: function(data) {
  160. vm.book = data.books;
  161. console.log(vm.book)
  162. }
  163. });
  164. }
  165. })
  166.  
  167. var vm = new Vue({
  168. el: '#app',
  169. data: {
  170. book: ''
  171. }
  172. })
  173. </script>
  174. </body>
  175.  
  176. </html>

vue.js-列表分页的更多相关文章

  1. html+vue.js 实现分页可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...

  2. Vue.js实现分页

    效果图 代码 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/ ...

  3. js列表分页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 用vue实现列表分页和按钮操作

    为中华之崛起而读书 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. vue.js 列表追加项写法

    <ul id="app"> <template v-for="site in sites"> <li>{{ site.nam ...

  6. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  7. Vue.js报错Failed to resolve filter问题原因

    Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...

  8. Vue.js 开发实践：实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  9. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  10. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

随机推荐

  1. （2.14）Mysql之SQL基础——游标

    (2.14)Mysql之SQL基础——游标 关键词:Mysql游标 -- (1)定义游标 declare cur_name cursor for select * from table_name wh ...

  2. 第一个Shader程序

    fx文件: float4x4 matWorld; float Time=1.0f; struct VS_OUTPUT { float4 Pos :POSITION; float4 Color :COL ...

  3. [css]单/多行居中&字体设置

    行高和字号 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. line-height: 40px; 文字,是在自己的行 ...

  4. scRNA-seq测序的两种技术[转载]

    转自:http://www.ebiotrade.com/newsf/2017-9/201795172237350.htm 1.综述 哈佛大学的两个团队将微流体技术引入单细胞RNA-Seq方法中,分别开 ...

  5. JS获取客户端系统当前时区

    <script> function getClientTimezone(){ var oDate = new Date(); var nTimezone = -oDate.getTimez ...

  6. Django的FBV和CB

    Django的FBV和CBV FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式,所以不再赘述. CBV C ...

  7. Ubuntu安装 Spark2.3.0 报错原因及解决

    Ubuntu 安装Spark出现的问题及解决 最近在搭建Hadoop集群环境和Spark集群环境,出现的问题可能不太复杂,纯粹记录安装步骤和问题解决办法.集群环境使用的是(2台)阿里云主机,操作系统是 ...

  8. 结合grabcut和inpaint，实现人像去除

    在OpenCV提供更多函数中,grabcut能够实现抠图,inpaint能够实现修补.那么把两者结合起来,就能够实现简单的“人像去除”功能,也就是框选一个人后,使用周围的景象对人像进行修补.虽然效果比 ...

  9. 20145307陈俊达《网络对抗》Exp4 恶意代码分析

    20145307陈俊达<网络对抗>Exp4 恶意代码分析 基础问题回答 如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪 ...

  10. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...