vue.js 2.0实现的简单分页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>vue.js 2.0 实现的简单分页</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
font-size: 12px;
font-family: Ubuntu, simHei, sans-serif;
font-weight: 400
}
body {
font-size: 1rem
}
.text-center{
text-align: center;
}
.pagination {
display: inline-block;
padding-left: 0;
margin: 21px 0;
border-radius: 3px;
}
.pagination > li {
display: inline;
}
.pagination > li > a {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.5;
text-decoration: none;
color: #009a61;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
list-style: none;
}
.pagination > li > a:hover {
background-color: #eee;
}
.pagination .active {
color: #fff;
background-color: #009a61;
border-left: none;
border-right: none;
}
.pagination .active:hover {
background: #009a61;
cursor: default;
}
.pagination > li:first-child > a .p {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.pagination > li:last-child > a {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
</style>
</head>
<body>
<div id="app">
<ul class="pagination">
<li v-for="index in all">
<a v-bind:class="cur === index + 1 ? 'active' : ''" v-on:click="btnClick(index + 1)">{{ index + 1 }}</a>
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
cur: 1, //当前页码
all: 8 //总页数
},
watch: {
cur: function(newVal, oldVal){ // 数值产生变化，触发回调
console.log(newVal, oldVal);
}
},
methods: {
btnClick: function(i){
this.cur = i;
// ajax 调取数据...
}
}
})
</script>
</html>
效果图
vue.js 2.0实现的简单分页的更多相关文章
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- Vue.js 2.0源码解析之前端渲染篇
一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
- Vue.js 2.0 参考手册.CHM下载
下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh
随机推荐
- 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...
- MySQL——索引基础
本篇文章,我们将从索引基础开始,介绍什么是索引以及索引的几种类型,然后学习如何创建索引以及索引设计的基本原则. 本篇文章中用于测试索引创建的user表的结构如下: 什么是索引 索引(在 MySQL 中 ...
- Android图形显示之硬件抽象层Gralloc【转】
https://blog.csdn.net/yangwen123/article/details/12192401 FrameBuffer驱动程序分析文中介绍了Linux系统下的显示驱动框架,每个显示 ...
- Linux 快速查看系统配置-熟悉新环境的配置
问题背景: 当我们使用新的环境的时候,需要很快得熟悉自己环境的配置,这时候我们如果知道一些命令就极为方便了.这样你就能对自己的环境较为熟悉,进行工作的时候也能随心所欲了. 如果你使用workstati ...
- 匿名访问windows server 2008 R2 文件服务器的共享
匿名访问windows server 2008 R2 文件服务器的共享 匿名访问windows 2008 R2 文件服务器的共享,七步:第一步 取消简单文件共享:第二步 设置需要共享的文件夹every ...
- MongoDB基础之 安装
本篇来介绍MongoDB的安装.安装版本是3.4.18 如果安装老版本的mongodb,你会发现安装比较顺利,但是新版本的mongo安装稍微麻烦一点 ,主要是多了安全机制认证等步骤. 1.下载mong ...
- 【Alpha 冲刺】 4/12
今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 完成API文档编写 已完成 会遗漏一些部分的api,但是通过群里询问以及对页面的review解决 孙浩楷 根据UI设计, 实现左侧 ...
- 【python】关于python中模块导入的总结
precondition:比如我有如下这样的文件目录结构 说明:add和debug两个包都隶属于src目录,它们是同级目录,其中在add路径下有一个add.py的模块,里面定义了一个jiafa()的函 ...
- eclipse能正常启动tomcat，但是网页访问不了
参考网址https://blog.csdn.net/did_itmyway/article/details/62099930
- 解决Windows Server2008 R2中IE开网页时弹出阻止框
使用Windows Server2008,用IE打开网站时会弹出“Internet Explorer增强安全配置正在阻止来自下列网站的此应用程序中的内容”的对话框.如下图所示: 2011-10-14_ ...