<!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-列表分页的更多相关文章

  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. Spark-RDD算子

    一.Spark-RDD算子简介 RDD(Resilient Distributed DataSet)是分布式数据集.RDD是Spark最基本的数据的抽象. scala中的集合.RDD相当于一个不可变. ...

  2. Notepad++插件安装和使用和打开大文件

    版权声明:本文为博主皮皮http://blog.csdn.net/pipisorry原创文章,未经博主同意不得转载. https://blog.csdn.net/pipisorry/article/d ...

  3. centos linux系统日常管理复习 CPU物理数逻辑核数,iftop ,iotop ,sar ,ps,netstat ,一网卡多IP,mii-tool 连接,ethtool速率,一个网卡配置多个IP,mii-tool 连接,ethtool速率 ,crontab备份, 第十八节课

    centos linux系统日常管理复习 物理CPU和每颗CPU的逻辑核数,uptime ,w,vmstat,iftop ,iotop ,sar ,ps,netstat ,一个网卡配置多个IP,mii ...

  4. Spark SQL与Hive on Spark的比较

    简要介绍了SparkSQL与Hive on Spark的区别与联系 一.关于Spark 简介 在Hadoop的整个生态系统中,Spark和MapReduce在同一个层级,即主要解决分布式计算框架的问题 ...

  5. HDU1695:GCD（容斥原理+欧拉函数+质因数分解）好题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1695 题目解析: Given 5 integers: a, b, c, d, k, you're to ...

  6. POJ1006——Biorhythms(中国剩余定理)

    Biorhythms Description人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色. ...

  7. 【android】如何让WebView对Video标签的支持更强力

    先说结论:各个产商对HTML5特性支持的程度不一样,用默认的WebChromeClient不能普遍适用. 因此咱基于GITHUB上一个VideoEnabledWebView库做了自己的封装,在魅族.华 ...

  8. 20145329 《网络对抗技术》PC平台逆向破解

    shellcode注入 实践是在非常简单的一个预设条件下完成的: (1)关闭堆栈保护 (2)关闭堆栈执行保护 (3)关闭地址随机化 (4)在x32环境下 (5)在Linux实践环境 shellcode ...

  9. git仓库迁移的两种解决方案

    Git仓库迁移而不丢失log的方法 要求能保留原先的commit记录,应该如何迁移呢? 同时,本地已经clone了原仓库,要配置成新的仓库地址,该如何修改呢? 注意:如果使用了代码审核工具Gerrit ...

  10. 自定义Git【转】

    本文转载自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 自定义Git 在安装G ...