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 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
javascript脚本调试方法小结
2008/11/24 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
实例讲解Python中的私有属性
2014/08/21 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python读取yaml文件的详细教程
2020/07/21 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
计算机求职信
2013/12/01 职场文书
企业申诉管理制度
2014/01/30 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
学习考察心得体会
2014/09/04 职场文书
学习十八大演讲稿
2014/09/15 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
详解Laravel服务容器的优势
2021/05/29 PHP
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python