Vue制作分页

<template>
  <div id="Login">
    <div @click="goHome" >I am home Login</div>

    <div id="pagination" class="page-bar">
      <ul>
        <li v-if="cur>1"><a @click="cur-- , pageClick()">上一页</a></li>
        <li v-for="index of indexs" :class="{ active:index == cur }"><a @click="btnClick(index)">{{index}}</a></li>
        <li v-if="cur<all"><a @click="cur++ , pageClick()">下一页</a></li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name:'Login',
    data(){
      return {
          all:20,
          cur:1
      }
    },
    methods:{
      goHome:function () {
        this.$router.push('/')
      },
      btnClick(data){
          this.cur = data
      },
      pageClick(){
          console.log(this.cur)
      }
    },
    computed:{
        indexs(){
            var arr = [];
            var left = 1;
            var right = this.all;

            if(this.all>5){
                if(this.cur>3 && this.cur<this.all-2){
                    left = this.cur-2;
                    right = this.cur+2;
                }else {
                  if(this.cur <=3){
                    left = 1;
                    right = 5;
                  }else{
                    left = this.all-4;
                    right = this.all;
                  }
                }
            }
            while (left<=right){
                arr.push(left);
                left++
            }
            return arr;
        }
    }
  }
</script>

<style scoped>

  #Login{
    width:100%;
    height:2000px;
    background-color: pink;
  }
  .page-bar{
    margin:40px;
  }
  ul,li{
    margin: 0px;
    padding: 0px;
  }
  li{
    list-style: none
  }
  .page-bar li:first-child>a {
    margin-left: 0px
  }
  .page-bar a{
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer
  }
  .page-bar a:hover{
    background-color: #eee;
  }

  .page-bar .active a{
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
  }
  .page-bar i{
    font-style:normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
  }
</style>

随机浏览