编程 Javascript

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实现简单分页效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue.js 2.0实现简单分页效果

- Author -

罗兵

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

许愿墙中用到的函数

Oct 07 Javascript

jQuery.Autocomplete实现自动完成功能（详解）

Jul 13 Javascript

用jQuery获取IE9下拉框默认值问题探讨

Jul 22 Javascript

JavaScript利用正则表达式去除日期中的“-”

Jul 01 Javascript

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

Apr 07 Javascript

jQuery实现响应鼠标背景变化的动态菜单效果代码

Aug 27 Javascript

JavaScript中两个字符串的匹配

Jun 08 Javascript

JS实现滑动门效果的方法详解

Dec 19 Javascript

angularjs项目的页面跳转如何实现（5种方法）

May 25 Javascript

js实现弹出框的拖拽效果实例代码详解

Apr 16 Javascript

JS实现使用POST方式发送请求

Aug 30 Javascript

layui 中select下拉change事件失效的解决方法

Sep 20 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