<!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. MS SQL backup database的俩个参数

    http://msdn.microsoft.com/zh-cn/library/ms186865.aspx 数据传输选项 BUFFERCOUNT = { buffercount | @bufferco ...

  2. 网工最实用最常用的网络命令之一——Ping 命令详解（一）

    Ping是Windows.Unix和Linux系统下的一个命令.ping也属于一个通信协议,是TCP/IP协议的一部分.利用“ping”命令可以检查网络是否连通,可以很好地帮助我们分析和判定网络故障. ...

  3. windows环境下 nginx+iis 反向代理解决跨域问题

    项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...

  4. 转：sqlserver 临时表、表变量、CTE的比较

    1.临时表 1.1 临时表包括:以#开头的局部临时表,以##开头的全局临时表. 1.2 存储 不管是局部临时表,还是全局临时表,都会放存在tempdb数据库中. 1.3 作用域 局部临时表:对当前连接 ...

  5. [Spark Core] Spark 实现气温统计

    0. 说明 聚合气温数据,聚合出 MAX . MIN . AVG 1. Spark Shell 实现 1.1 MAX 分步实现 # 加载文档 val rdd1 = sc.textFile(" ...

  6. Javaweb学习(二)：Http通信协议

      当我们开始jsp/servlet编程之旅之前,我们还需要知道一些关于网络通讯方面的一些知识.这样能更加有助于我们的理解,希望大家能看懂我的描述,而不至于在学习的路上一知半解.(手动比❤) 认识Ht ...

  7. 2.python数据结构的性能分析

    一.引言 - 现在大家对 大O 算法和不同函数之间的差异有了了解.本节的目标是告诉你 Python 列表和字典操作的 大O 性能.然后我们将做一些基于时间的实验来说明每个数据结构的花销和使用这些数据结 ...

  8. JAVA引用的种类

    最近在进行Java项目开发的时候,由于业务的原因,有时候new的对象会比较多,这个时候我总是有一个疑惑?那就是JVM在何时决定回收一个Java对象所占据的内存?这个问题其实对整个web系统来说是一个比 ...

  9. 【转】jquery cookie操作

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...

  10. webstorm 搭建es6开发环境

    本文转自:http://www.jianshu.com/p/26601581e152 1:新建一个Empty Project项目es6 ,然后在src目录下新建了一个es.js: 2:打开设置pref ...