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 toggle()设置CSS样式
Nov 05 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
世界上第一台立体声收音机
2021/03/01 无线电
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python登录系统界面实现详解
2019/06/25 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
阿尔卡特(中国)的面试题目
2014/08/20 面试题
普通简短的个人自我评价
2014/02/15 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers