基於vue.js實作的分頁

本文主要跟大家介紹基於vue的分頁原生寫法，程式碼分為html部分和js部分，簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

本文主要介紹基於vue的分頁原生寫法。

先po上效果圖：

html部分，將page當作一個單獨的元件

js部分：

css部分：

 body {
   font-family: "Segoe UI";
  }
  li {
   list-style: none;
  }
  a {
   text-decoration: none;
  }
  .pagination {
   position: relative;
  }
  .pagination li {
   display: inline-block;
   margin: 0 5px;
  }
  .pagination li a {
   padding: .5rem 1rem;
   display: inline-block;
   border: 1px solid #ddd;
   background: #fff;
   color: #0E90D2;
  }
  .pagination li a:hover {
   background: #eee;
  }
  .pagination li.active a {
   background: #0E90D2;
   color: #fff;
  }

##上面是我整理給大家的，希望未來對大家有幫助。

相關文章：

Angularjs實作控制器之間通訊方式實例總結

Angular中使用better-scroll插件的方法_AngularJS

使用node打造自己的命令列工具方法教學

以上是基於vue.js實作的分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！