advantage

What are the advantages of using VUE to do front-end paging? What are the benefits of two-way data binding? Let’s break down the functionality of a simple page.

  1. Current page, this can use watch to see what the current page number is.
  2. On the previous page, on the next page, we add ++ and to the previous page — in fact, these two functions can be achieved.
  3. A lot of page numbers need to change automatically, so for example we’re only showing 5 page numbers at a time, so when we’re at 90, the start page is 86, so this is changing. So we need to build a bidirectionally bound array to render it.

implementation

The key question is 3, how do you generate this page number? Take a look at the logical judgment:

Take a look at the code:

computed: { // Calculate a value pages in the calculate property and return a data
    pages:(a)= > {
        var left = 1; // The default starting value is 1
        var right = this.all; // The end value is all
        var arr = [];
        if(this.all>= 5) {if(this.cur > 3 && this.cur < this.all2 -){
                    left = this.cur - 2
                    right = this.cur + 2
            }else{
                if(this.cur<=3){
                    left = 1
                    right = 5
                }else{
                    right = this.all
                    left = this.all 4 -}}}while (left <= right){
            arr.push(left)
            left ++
        }
        return arr
    }
}
Copy the code

After processing one of the following logic, click on the page number and go directly to the code:

btnClick:(data){        
    if(data ! =this.cur){ // check if it is the current page
        this.cur = data 
    }
},
Copy the code

Other code

<li v-if="cur>1"><a v-on:click="cur--,pageClick()">The previous page</a></li>
<li v-if="cur==1"><a class="banclick">The previous page</a></li>
<li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">
    <a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur! =all"><a v-on:click="cur++,pageClick()">The next page</a></li>
<li v-if="cur == all"><a class="banclick">The next page</a></li>
Copy the code

And then we have two numbers

data{
    return {
        all:111.cur:1}}Copy the code