vuejs2.0实现一个简单的分页

时间:2019-01-30 13:44:45 来源:互联网 作者: 神秘的大神 字体:

用js实现的分页结果如图所示:

css

.page-bar{      margin:40px;  }  ul,li{      margin: 0px;      padding: 0px;  }  li{      list-style: none  }  .page-bar li:first-child>a {     margin-left: 0px  }  .page-bar a{      border: 1px solid #ddd;      text-decoration: none;      position: relative;      float: left;      padding: 6px 12px;      margin-left: -1px;      line-height: 1.42857143;      color: #337ab7;      cursor: pointer  }  .page-bar a:hover{      background-color: #eee;  }  .page-bar a.banclick{      cursor:not-allowed;  }  .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;  }

 

模版

<div class="page-bar">      <ul>          <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>          <li v-if="cur==1"><a class="banclick">上一页</a></li>          <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">              <a v-on:click="btnClick(index)">{{ index }}</a>          </li>          <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>          <li v-if="cur == all"><a class="banclick">下一页</a></li>          <li><a>共<i>{{all}}</i>页</a></li>      </ul>  </div>

 

js

var pageBar = new Vue({      el: '.page-bar',      data: {          all: 20, //总页数          cur: 1,//当前页码  });

 

调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 pageBar.
el就是element的缩写,定位模版的位置.data就是数据了.
知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.
所以我们要用computed

computed: {          indexs: function(){            var left = 1;            var right = this.all;            var ar = [];            if(this.all>= 5){              if(this.cur > 3 && this.cur < this.all-2){                      left = this.cur - 2                      right = this.cur + 2              }else{                  if(this.cur<=3){                      left = 1                      right = 5                  }else{                      right = this.all                      left = this.all -4                  }              }           }          while (left <= right){              ar.push(left)              left ++          }          return ar         }                 }

 

看一下页面显示出来的循环:

<li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">          <a v-on:click="btnClick(index)">{{ index }}</a>      </li>

 

v-for是循环渲染输出计算属性indexs.每一次循环的子元素赋值给index v-bind:class绑定class,当渲染到目前的角标的时候加个class v-on:click是绑定了事件,我把index当参数传进入了,后面做判断,默认传event事件.
然后我们给Vue的选项里面再增加methods字段

methods: {          btnClick: function(data){//页码点击事件              if(data != this.cur){                  this.cur = data               }          },          pageClick: function(){              console.log('现在在'+this.cur+'页');          }      },

 

组件交互

组件写完了,问题来了,用户点击发生页面改变,你怎么通知其他组件作出相应的变化. 可以在页角发生改变的函数下,插一条语句通知其他组件。不过这种方法是很差的做法。可以使用

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

 

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

完整的代码:

 

<!DOCTYPE html>  <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  <meta charset="utf-8">  <title></title>  <meta name="keywords" content="" />  <meta name="description" content="" />  <script type="text/javascript" src="js/vue.min.js"></script>  <style>  .page-bar{      margin:40px;  }  ul,li{      margin: 0px;      padding: 0px;  }  li{      list-style: none  }  .page-bar li:first-child>a {     margin-left: 0px  }  .page-bar a{      border: 1px solid #ddd;      text-decoration: none;      position: relative;      float: left;      padding: 6px 12px;      margin-left: -1px;      line-height: 1.42857143;      color: #337ab7;      cursor: pointer  }  .page-bar a:hover{      background-color: #eee;  }  .page-bar a.banclick{      cursor:not-allowed;  }  .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;  }  </style>  </head>  <body>   <div class="page-bar">      <ul>          <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>          <li v-if="cur==1"><a class="banclick">上一页</a></li>          <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">              <a v-on:click="btnClick(index)">{{ index }}</a>          </li>          <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>          <li v-if="cur == all"><a class="banclick">下一页</a></li>          <li><a>共<i>{{all}}</i>页</a></li>      </ul>  </div>  <script type="text/javascript">  var pageBar = new Vue({      el: '.page-bar',      data: {          all: 8, //总页数          cur: 1//当前页码      },      watch: {          cur: function(oldValue , newValue){              console.log(arguments);          }      },           methods: {          btnClick: function(data){//页码点击事件              if(data != this.cur){                  this.cur = data               }          },          pageClick: function(){              console.log('现在在'+this.cur+'页');          }      },            computed: {          indexs: function(){            var left = 1;            var right = this.all;            var ar = [];            if(this.all>= 5){              if(this.cur > 3 && this.cur < this.all-2){                      left = this.cur - 2                      right = this.cur + 2              }else{                  if(this.cur<=3){                      left = 1                      right = 5                  }else{                      right = this.all                      left = this.all -4                  }              }           }          while (left <= right){              ar.push(left)              left ++          }          return ar         }                 }  })  </script>  </body>  </html>

 

View Code

 参考地址

https://www.zhihu.com/question/37174943

https://segmentfault.com/a/1190000003931500