【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;
        }

後續慢慢改爲實際使用中的組件