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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
jquery实现轮播图特效
Apr 12 jQuery
详解React的回调渲染模式
Sep 10 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
CocosCreator入门教程之网络通信
Apr 16 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之密码加密的几种方式
2015/07/29 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python算法表示概念扫盲教程
2017/04/13 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
使用python实现飞机大战游戏
2020/03/23 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
shell程序中如何注释
2012/01/28 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
专科生就业求职信
2014/06/22 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
创业计划书之酒厂
2019/10/14 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python