Home > Web Front-end > Vue.js > How to use vuejs-paginate

How to use vuejs-paginate

青灯夜游
Release: 2023-01-13 00:45:46
Original
1985 people have browsed it

Method: 1. Use the npm command to install the bootstrap and vuejs-paginate plug-ins; 2. Use the import and "Vue.component()" statements to introduce the plug-in; 3. Add "” code is enough.

How to use vuejs-paginate

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue.js Paginate is a simple Vue.js paging component. It provides a simple API for paging. It is easy to use and can customize the style of the component through CSS.

Use the paging plug-in vuejs-paginate in vue

1. Install dependent libraries (need to use bootstrap css style) and Pagination plug-in (vuejs-paginate)

npm install bootstrap@3.3.0 -–save-dev
npm install vuejs-paginate --save
Copy after login

2. Use

to introduce

import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate)
Copy after login

and use

<paginate
  :page-count="20"
  :click-handler="functionName"
  :prev-text="&#39;Prev&#39;"
  :next-text="&#39;Next&#39;"
  :container-class="&#39;className&#39;">
</paginate>
Copy after login
in the component

Example:

How to use vuejs-paginate

Related recommendations: "vue.js tutorial"

The above is the detailed content of How to use vuejs-paginate. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template