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-列表分页的更多相关文章
- html+vue.js 实现分页可兼容IE
当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...
- Vue.js实现分页
效果图 代码 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/ ...
- js列表分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用vue实现列表分页和按钮操作
为中华之崛起而读书 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- vue.js 列表追加项写法
<ul id="app"> <template v-for="site in sites"> <li>{{ site.nam ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- Vue.js报错Failed to resolve filter问题原因
Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
- Vue.js 开发实践：实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- 关于vue.js中列表渲染练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
随机推荐
- Linux环境下proc的配置c/c++操作数据库简单示例
在虚拟机上装了oracle11g数据库,原本想利用c/c++学习操作数据库.结果感觉摊上了一个大坑.从安装好oracle数据库到配置好proc的编译选项整整花了二天.但让我意识到自己自己几点薄弱:1. ...
- Java-idea-FindBugs、PMD和CheckStyle对比
一.对比 工具 目的 检查项 备注 FindBugs 检查.class 基于Bug Patterns概念,查找javabytecode (.class文件)中的潜在bug 主要检查bytecode中的 ...
- Winform 下使用WebBrowser的HTML编辑控件—WinHtmlControl 在win7 IE9下的问题
问题是这样的,有一个需要用到富文本的地方,由于是winform的程序,而且程序是上一代老员工留下的,错误百出,现在要尽量修复,至少保证能正常使用,于是就开始一点点问题修复. 在win7 64位系统下出 ...
- MySQL5.7多源复制
MySQL5.7开始支持多源复制,也就是多主一从的复制架构: 使用多源复制的考虑: 1.灾备作用:将各个库汇总在一起,就算是其他库都挂了(整个机房都无法连接了),还有最后一个救命稻草: 2.备份:直接 ...
- 20165207 预备作业3 Linux安装及学习
Linux安装及学习 假期我没有把我的电脑带回家,受到家里的台式机内存和网吧的一些条件的限制我只在台式机安装了32位系统然后学习了实验楼的Vim课程以及Linux的前八课. 问题与解决 安装过程 我家 ...
- React 根据 state 修改className
className={ this.state.isLike ? 'active iconfont icon-xihuan' : 'iconfont icon-xihuan1' }
- SQL学习笔记五之MySQL索引原理与慢查询优化
阅读目录 一 介绍 二 索引的原理 三 索引的数据结构 四 聚集索引与辅助索引 五 MySQL索引管理 六 测试索引 七 正确使用索引 八 联合索引与覆盖索引 九 查询优化神器-explain 十 慢 ...
- 20145307陈俊达《网络对抗》Exp3 免杀原理与实践
20145307陈俊达<网络对抗>Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 恶意代码中一般会有一段有较明显特征的代码也就是特征码,如果杀毒软件检测到有程序包含的 ...
- tomcat的安装和启动
下载apache-tomcat-8.5.5-src,我将其放在了/usr/local/tomcat目录下 要启动需要运行: /usr/local/tomcat/apache-tomcat-8.5.5- ...
- luogu P1025 数的划分
https://www.luogu.org/problem/show?pid=1025 n的k划分 且不出现划分成0的情况 可以 分为两种情况 所有划分的数 都大于1的情况 至少划分的数里面有1的情 ...