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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
express的中间件cookieParser详解
2014/12/04 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python制作爬虫采集小说
2015/10/25 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python 解压pkl文件的方法
2018/10/25 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python增加图像对比度的方法
2019/07/12 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Python如何进行时间处理
2020/08/06 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
魅力教师事迹材料
2014/01/10 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python