vue實現一個簡單的分頁功能範例詳解

 <!-- 分頁內容 -->
          <ul class="blog-lists-box">
             <li class="blog-list" :key="index" v-for="(item, index) in dataShow" :class="{ 'alt': index%2 == 1 }">
                <div class="card">
                    <div class="blog-overlay">
                      <router-link to="/blog/singleBlog">
                        <figure>
                          <img :src="img1"/>
                          <figcaption></figcaption>
                        </figure>
                      </router-link>
                    </div>
                    <div class="card-body">
                       <router-link to="/blog/singleBlog">
                         <h4 class="card-title">{{item.title}}</h4>
                       </router-link>
                       <div class="card-footer">
                         <div class="card-footer-box d-flex">
                           <div class="author-box">
                             <a href="#" rel="external nofollow" >
                               <img :src="header1"/>
                               <span>{{item.username}}</span>
                             </a>
                           </div>
                           <div class="blog-date text-uppercase">
                             <i class="fa fa-calendar"></i>
                             <span>{{item.time}}</span>
                           </div>
                         </div>
                       </div>
                    </div>
                </div>
              </li>
          </ul>
          <!-- 分頁按鈕組 -->
          <div class="page">
             <ul class="pagination clearfix flex-center">
                <li class="page-item stic">
                   <a class="page-link "  v-on:click="prePage">Prev</a>
                </li>
                <li class="page-item" :key="index" v-for="(item, index) in totalPage">
                   <a class="page-link"  v-on:click="toPage(index)" :class="{active: currentPage == index}">{{ index+1 }}</a>
                </li>
                <li class="page-item">
                   <a class="page-link"  v-on:click="nextPage">Next</a>
                </li>
             </ul>
          </div>

 data () {
    return {
      img1: img1,
      header1: header1,
      listArray: [{
        'title': '25 Places To Get The Best Wedding...',
        'username': 'liulong',
        'time': '2019/12/6'
      }, {
        'title': '10 Bridal Bouquets You'll Fall In Love...',
        'username': 'wangxianhui',
        'time': '2019/12/7'
      }, {
        'title': 'Tips For Choosing The Right Weddi...',
        'username': 'chenggang',
        'time': '2019/12/8'
      }, {
        'title': 'Planning The Perfect Bachelorette...',
        'username': 'wangwengang',
        'time': '2019/12/9'
      }, {
        'title': 'Top 20 Tips for Wedding Invitat...',
        'username': 'yuzhiwei',
        'time': '2019/12/10'
      }, {
        'title': 'Best Tips for the Bride and Groom...',
        'username': 'zhaopu',
        'time': '2019/12/11'
      }],
      // 控制每頁顯示資料的數數量
      pageSize: 3,
      // 預設顯示第幾頁
      currentPage: 0,
      // 總資料
      totalPage: [],
      // 當前顯示的資料
      dataShow: []
    }
  },
  methods: {
    nextPage: function () {
      if (this.currentPage === this.pageNum - 1) {
        return
      }
      this.dataShow = this.totalPage[++this.currentPage]
    },
    prePage: function () {
      if (this.currentPage === 0) {
        return
      }
      this.dataShow = this.totalPage[--this.currentPage]
    },
    toPage: function (page) {
      this.currentPage = page
      this.dataShow = this.totalPage[this.currentPage]
    }
  },
  created: function () {
    this.pageNum = Math.ceil(this.listArray.length / this.pageSize) || 1
    for (var i = 0; i < this.pageNum; i++) {
      this.totalPage[i] = this.listArray.slice(this.pageSize * i, this.pageSize * (i + 1))
    }
    this.dataShow = this.totalPage[this.currentPage]
  }