【Vue】分页

新工作加班了好久终于放假了，接下来打算一点点的做点积累的事情，当前主要先把直接做过得东西分拆重新规划下，准备用vue来做spa，一步步来吧。

vue分页

• 时常用到分页的功能，所以需要做个组件（暂且先来个样式代码）

• 在线编辑：https://jsfiddle.net/woaisluosj/qdvge43d/

代码

html

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="vue-dingyi-paging">
  <ul>
    <li>
      <a class="pageLink" href="#" @click="setPage(curNum-1)">
        <</a>
    </li>
    <li v-for="n in totalNum">
      <a class="pageLink" href="#" v-text="n+1" @click="setPage(n+1)" :class="{ curPage: n+1 == curNum }"></a>
    </li>
    <li><a class="pageLink" href="#" @click="setPage(curNum+1)">></a></li>
  </ul>
</div>

js

new Vue({
  el: '#vue-dingyi-paging',
  data: {
    totalNum: 6, //总页数
    curNum: 1 //当前页码
  },
  methods: {
    //切换页码
    setPage: function(num) {
      //页码小于等于1
      if (num <= 1) {
        return this.curNum = 1;
      }
      //页码大于总页数
      if (num >= this.totalNum) {
        return this.curNum = this.totalNum;
      }
      //页码赋给当前页
      this.curNum = num;
    }
  }
})

css

        * {
          margin: 0;
          padding: 0;
          font-size: 14px;
        }
        
        #vue-dingyi-paging ul {
          list-style: none;
          margin-top: 10px;
        }
        
        #vue-dingyi-paging ul li {
          margin: 0 5px;
        }
        
        #vue-dingyi-paging ul li,
        .pageLink {
          display: inline-block;
          width: 40px;
          height: 40px;
          background: #F0F0F0;
          color: #ABABAB;
          border-radius: 3px;
          text-align: center;
          text-decoration: none;
          line-height: 40px;
        }
        
        #vue-dingyi-paging ul li .pageLink:hover {
          background: #ABABAB;
          color: #FFFFFF;
        }
        
        #vue-dingyi-paging ul li .curPage {
          background: #81C06F;
          color: #FFFFFF;
        }

后续慢慢改成实际使用中的组件