基于vue.js的分页插件

转自：http://blog.youkuaiyun.com/amberwu/article/details/53067507

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

html代码：

[html]  view plain  copy

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

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

[css]  view plain  copy

1. .page-bar {  
2.         margin-top: 21px;  
3.         margin-left: 11%;  
4.     }  
5.       
6.     .page-bar ul,  
7.     .page-bar li {  
8.         margin: 0px;  
9.         padding: 0px;  
10.     }  
11.       
12.     .page-bar ul li {  
13.         list-style: none;  
14.         border: 1px solid #ddd;  
15.         text-decoration: none;  
16.         position: relative;  
17.         float: left;  
18.         text-align: center;  
19.         padding: 1px 0;  
20.         margin-left: -1px;  
21.         line-height: 1.42857143;  
22.         color: #337ab7;  
23.         cursor: pointer;  
24.         width: 8%;  
25.     }  
26.       
27.     .page-bar li:first-child>a {  
28.         margin-left: 0px  
29.     }  
30.       
31.     .page-bar .active a {  
32.         color: #fff;  
33.         cursor: default;  
34.         background-color: #337ab7;  
35.         border-color: #337ab7;  
36.     }  
37.       
38.     .page-bar i {  
39.         font-style: normal;  
40.         color: #d44950;  
41.         margin: 0px 4px;  
42.         font-size: 12px;  
43.     }  

js部分：

首先要创建一个基本组件

[javascript]  view plain  copy

1. var vm = new Vue({  
2.     el: 'body',  
3.     data: {  
4.         list: null,  
5.         all: 1, //总页数  
6.         cur: 1, //当前页码  
7.     },  

继而要利用computed计算页码，

[javascript]  view plain  copy

1.  computed: {  
2.       indexs: function(index) {  
3.         var left = 1;  
4.         var right = this.all;  
5.         var ar = [];  
6.         if (this.all >= 11) {  
7.           if (this.cur > 5 && this.cur < this.all - 4) {  
8.             left = this.cur - 5;  
9.             right = this.cur + 4;  
10.           } else {  
11.             if (this.cur <= 5) {  
12.               left = 1;  
13.               right = 10;  
14.             } else {  
15.               right = this.all;  
16.               left = this.all - 9;  
17.             }  
18.           }  
19.         }  
20.         while (left <= right) {  
21.           ar.push(left);  
22.           left++;  
23.         }  
24.         return ar;  
25.       },  
26.       showLast: function() {  
27.         if (this.cur == this.all) {  
28.           return false  
29.         }  
30.         return true  
31.       },  
32.       showFirst: function() {  
33.         if (this.cur == 1) {  
34.           return false  
35.         }  
36.         return true  
37.       }  
38.     }  

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

[javascript]  view plain  copy

1. methods: {  
2.     btnClick: function(items) { //页码点击事件  
3.         if (items != this.cur) {  
4.             this.cur = items  
5.         }  
6.     }  
7. },  

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

[javascript]  view plain  copy

1.   watch: {  
2.         cur: function(oldValue, newValue) {  
3.             console.log(arguments)  
4.            
5.         }  
6.     }  

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

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

*******************************************************************补充效果图展示***************************************************************************