基于vue.js的分页插件详解

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多，请戳http://cn.vuejs.org/

html代码：

<div class="page-bar" v-else> 
    <ul> 
      <li style="width: 11%" v-if="showFirst"> 
        <a v-on:click="cur--"> 
          <<</a> 
      </li> 
      <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> 
        <a v-on:click="btnClick(index)">{{index}}</a> 
      </li> 
      <li style="width: 11%" v-if="showLast"><a v-on:click="cur++"> >></a></li> 
      <li style="width: 22%;margin-left: 7%"><a>共<i>{{all}}</i>页</a></li> 
    </ul> 
  </div> 

css部分，可根据自己的实际需要进行调整：

.page-bar { 
    margin-top: 21px; 
    margin-left: 11%; 
  } 

  .page-bar ul, 
  .page-bar li { 
    margin: 0px; 
    padding: 0px; 
  } 

  .page-bar ul li { 
    list-style: none; 
    border: 1px solid #ddd; 
    text-decoration: none; 
    position: relative; 
    float: left; 
    text-align: center; 
    padding: 1px 0; 
    margin-left: -1px; 
    line-height: 1.42857143; 
    color: #337ab7; 
    cursor: pointer; 
    width: 8%; 
  } 

  .page-bar li:first-child>a { 
    margin-left: 0px 
  } 

  .page-bar .active a { 
    color: #fff; 
    cursor: default; 
    background-color: #337ab7; 
    border-color: #337ab7; 
  } 

  .page-bar i { 
    font-style: normal; 
    color: #d44950; 
    margin: 0px 4px; 
    font-size: 12px; 
  } 

js部分：

首先要创建一个基本组件

var vm = new Vue({ 
  el: 'body', 
  data: { 
    list: null, 
    all: 1, //总页数 
    cur: 1, //当前页码 
  }, 

继而要利用computed计算页码，

 computed: { 
   indexs: function(index) { 
    var left = 1; 
    var right = this.all; 
    var ar = []; 
    if (this.all >= 11) { 
     if (this.cur > 5 && this.cur < this.all - 4) { 
      left = this.cur - 5; 
      right = this.cur + 4; 
     } else { 
      if (this.cur <= 5) { 
       left = 1; 
       right = 10; 
      } else { 
       right = this.all; 
       left = this.all - 9; 
      } 
     } 
    } 
    while (left <= right) { 
     ar.push(left); 
     left++; 
    } 
    return ar; 
   }, 
   showLast: function() { 
    if (this.cur == this.all) { 
     return false 
    } 
    return true 
   }, 
   showFirst: function() { 
    if (this.cur == 1) { 
     return false 
    } 
    return true 
   } 
  } 

要给 元素加v-on:click="cur++"事件，所以要在vue里加method方法：

methods: { 
  btnClick: function(items) { //页码点击事件 
    if (items != this.cur) { 
      this.cur = items 
    } 
  } 
}, 

其实到这里基本上就差不多了，但是可以优化一下，当用户触发点击事件时，页面发生改变，这时要通知其他组件做出改变。

 watch: { 
  cur: function(oldValue, newValue) { 
   console.log(arguments) 

  } 
 } 

观察了cur数据当它改变的时候，可以获取前后值。然后通知其他组件。

后期会在个人GitHub上提交完整版代码

补充效果图展示

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