vue implements a pagination component vue-paginaiton
I feel that I have used vue for a while, that I no longer want to operate the DOM directly. The data-bound programming experience is really good. An implementation of a paging component.
The css here will not be released. You can read it and download it directly on github: vue-pagination
Let's take a picture of the example first
stencil
<div> <ul> <li v-if="showFirstText"><a v-on:click="cur--">Previous page</a></li> <li v-for = "index in pagenums"> <a v-on:click="pageChange(index)">{{index}}</a> </li> <li v-if="showNextText"><a v-on:click="cur++">Next page</a></li> <li><a>Total <i>{{all}}</i> </a></li> </ul></div>Before JS is introduced, the page display and analysis can be simply output directly. {{index}} is the page number, which requires some dynamic rendering.
var app = new Vue({ el: '#app', data:{ currentpage: 1, totlepage: 28, visiblepage:10, msg: '' },})Calling new Vue({parameter}) is to create a basic component, assign it to the variable app.el is the abbreviation of element, positioning the position of the template.data is the data. I know the total number of pages, but to display the page number, it still needs to be calculated, so displaying the page number is the calculation attribute. So we need to use compute
computed: { //Computed attributes: Return to the page number array, dirty check will be automatically performed here, without $watch(); pagenums: function(){ //Page boundary before and after initialization var lowPage = 1; var highPage = this.totlepage; var pageArr = []; if(this.totlepage > this.visiblepage){//If the total number of pages exceeds the number of visible pages, further processing will be performed; var subVisiblePage = Math.ceil(this.visiblepage/2); if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//Processing normal page lowPage lowPage = this.currentpage - subVisiblePage; highPage = this.currentpage + subVisiblePage -1; }else if(this.currentpage <= subVisiblePage){//Processing logical lowPage for the previous few pages = 1; highPage = this.visiblepage; }else{//Processing logical lowPage for the last few pages = this.totlepage - this.visiblepage + 1; highPage = this.totlepage; } } //After determining the upper and lower page boundaries, you must prepare to press into the array and be while(lowPage <= highPage){ pageArr.push(lowPage); lowPage ++; } return pageArr; } },When watching the html template, I found the v-if directive. It is obvious that when the content is true, it will be output, and if it is not.
Focus on
<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}"> <a v-on:click="pageChange(index)">{{ index }}</a> </li>v-for is the loop rendering output calculation attribute pagenums. Each loop child element is assigned to index v-bind:class to bind class. When rendering to the current angle mark, add class v-on:click to bind event. I pass index as parameter in, and make a judgment later, and pass event event by default.
Then we add the methods field to the Vue option
methods:{ pageChange: function(page){ if (this.currentpage != page) { this.currentpage = page; this.$dispatch('page-change', page); //Communication between parent and child components: ==>The child components distribute events through $dipatch(), and the parent component bubbles and listens to the corresponding events through v-on:page-change; }; } }Component interaction
The component is finished writing, and the problem is that the user clicks on the page to change. How do you notify other components to make corresponding changes? You can insert a statement under the function where the page corner changes. But this method is a very poor approach. Available
watch: { currentpage: function(oldValue , newValue){ console.log(arguments) }}Observe the currentpage data when it changes, before and after values can be obtained. Then notify other components.
The complete code can be found in github:vue-pagination
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.