如何在Vue中使用分頁

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。

分頁功能通過允許用戶以較小的塊或頁面可視化數據來增強用戶體驗。 下面介紹如何創建帶分頁的 Vue.js 組件，以便我們一次只能查看部分數據。

我將首先在我們的 JavaScript 對象中逐一進行分析，然后顯示模板。

我唯一需要的本地數據是頁碼。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

對于 props 來說，數據是必要的，另外我還定義了 size 這個參數來保存每一頁數據的數量的最大值。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

在 methods 中，我定義了下一頁和上一頁的兩個方法：

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

我使用計算屬性值來計算一共有多少頁：

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData 就是獲取過濾后的數據的計算屬性：

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

修改：在一開始我使用 .splice 來復制數組，但更完美的做法是使用 .slice 方法，在這里感謝 Alexander Karelas。

在 template 中：

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

我希望在最開始或者最末尾阻止用戶按下按鈕，對于 prevPage 按鈕，我加入了 :disabled="pageNumber=0" 而對于 nextPage 按鈕，我加入 :disabled="pageNumber >= pagecount -1"。

以上就是在 Vue 中使用分頁的詳細內容，更多請關注億速云其它相關文章！