<!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实现的简单分页的更多相关文章

  1. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  2. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  3. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  4. Vue.js 2.0源码解析之前端渲染篇

    一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...

  5. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  6. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  7. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  8. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  9. Vue.js 2.0 参考手册.CHM下载

    下载地址 Vue.js 2.0 参考手册.CHM下载链接: http://pan.baidu.com/s/1kVbhd4b 密码: wxfh

随机推荐

  1. Hive使用SequenceFile存储数据

    SequenceFile是使用二进制保存数据,是可以压缩的,并且压缩后的数据可被分割,可以供mapreduce处理. 下面的实例使用SequenceFile保存Hive表的数据,并且使用了压缩. se ...

  2. excel、xls文件读写操作

    python 常用的excel.xls文件读写操作,有两个模块 xlrd:读 xlwt:写 本次先写一个读的例子: class CaseData(object): def __init__(self, ...

  3. jQuery的介绍和选择器详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...

  4. FTP上传下载类

    public class FtpOperation { public static void UploadFile(FileInfo fileinfo, string targetDir, strin ...

  5. visual studio 单元测试的认识

    单元测试(unit testing),对软件中的最小单元进行检查和验证,其一般验证对象是一个函数或者一个类. Team Test 是 Visual Studio 集成的单元测试框架,它支持: 测试方法 ...

  6. [Synology] [群晖] 关闭被占用的文件

    1. Control Panel: Control Panel > Terminal & SNMP Enable SSH service 2. SSH into Synology 3. ...

  7. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  8. python永久添加第三方模块，PYTHONPATH的设置

    今天用pip安装pymysql后遇到了一个问题,在PyCharm中import pymysql模块时,运行却提示我找不到pymysql mudule 我先考虑的是pymysql没有安装成功,但是cmd ...

  9. Questions about UIUC and USC

    Questions about UIUC and USC I am admitted to University of Illinois at Urbana-Champaign (UIUC) Prof ...

  10. Difference between HashMap and Hashtable | HashMap Vs Hashtable

    Both the HashMap and Hashtable implement the interface java.util.Map but there are some slight diffe ...