Pagination based on vue.js

This article mainly introduces you to the native writing method of paging based on vue. The code is divided into html part and js part. It is simple and easy to understand. It is very good and has reference value. Friends who need it can refer to it.

This article mainly Introducing the native writing method of paging based on vue.

First post the renderings:

#html part, use the page as a separate component

js part:

css part:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Summary of examples of communication methods between controllers in Angularjs

Using the better-scroll plug-in in Angular Method_AngularJS

Using node to create your own command line tool method tutorial

The above is the detailed content of Pagination based on vue.js. For more information, please follow other related articles on the PHP Chinese website!