vue.js 2.0实现简单分页效果


Posted in Javascript onJuly 29, 2019

本文实例为大家分享了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实现简单分页效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 #Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 #Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 #Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 #Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 #Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 #Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 #Javascript
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php在线打包程序源码
2008/07/27 PHP
php 字符串函数收集
2010/03/29 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
php与paypal整合方法
2010/11/28 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python中的默认参数实例分析
2018/01/29 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
社会实践活动总结
2015/02/05 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
七年级作文之环保作文
2019/10/17 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL