基于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中文网其他相关文章！