分页

<div> 

  <p>
            <!-- 来写我们分页的展示效果 -->
            <!-- 作用:是用来告诉前端自己的第几页 -->

            <button @click="first_page()">首页</button>
            <button @click="up_page()">上一页</button>
            <button v-for="p in page_list" :key="p" @click="get_page(p)">{{p}}</button>
            <button @click="down_page()">下一页</button>
            <button @click="last_page()">尾页</button>                
       </p>

</div>

 

get_page(p){
            console.log(p)
            this.p = p
            this.get_info()

        },
        first_page(){
            this.p = 1
            this.get_info()
        },
        up_page(){
            if (this.p>1){
                this.p -= 1
                this.get_info()
            }else{
                this.p = 1
                this.get_info()
            }
        },
        down_page(){
            if(this.p>=this.all_page){
                this.p=this.all_page
                this.get_info()
            }else{
                this.p += 1
                this.get_info()
            }
        },
        last_page(){
            this.p = this.all_page
            this.get_info()
        }
posted @ 2020-01-08 11:00  ZS梦  阅读(72)  评论(0编辑  收藏  举报