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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
js 概率计算(简单版)
Sep 12 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
node实现基于token的身份验证
Apr 09 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&amp;mysql 日期操作小记
2012/02/27 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
python多重继承实例
2014/10/11 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
JSF如何进行表格处理及取值
2012/08/06 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2016年党员承诺书范文
2016/03/24 职场文书