vue 简单分页组件

<template>  <!-- Pagination -->  <ul class="actions pagination">    <li><h3>T:<span class="red">{{totalElements}}</span> P:<span class="red">{{totalPages}}</span> N:<span class="red">{{pageCur}}</span></h3></li>    <li><a href="" class=" button small first" :class="{'disabled':pageCur===1}" @click.prevent="paging(1)">首页</a></li>    <li><a href="" class=" button small previous" :class="{'disabled':pageCur===1}"  @click.prevent="paging(pageCur-1)">上一页</a></li>    <li><a href="#"  class="button small next" :class="{'disabled':pageCur===totalPages}" @click.prevent="paging(pageCur+1)">下一页</a></li>    <li><a href="#" class="button small last" :class="{'disabled':pageCur===totalPages}" @click.prevent="paging(totalPages)">尾页</a></li>    <li><input type="text" class="input"  v-model.number="nextCur" @change="checkNextCur()"/><a href="#" class="button small go-btn" @click.prevent="goPage()">GO</a></li>  </ul></template><script type="text/ecmascript-6">  export default {    data() {      return {        pageCur:1,        nextCur:2      }    },    components: {},    props:{      totalElements:{        type:Number,        default:0,      },      totalPages:{        type:Number,        default:0,      },    },    created(){    },    methods:{      paging(pageCur){        if(pageCur<1){          this.pageCur=1;          return        }        if(pageCur>this.totalPages){          this.pageCur=this.totalPages;          return        }        this.pageCur=pageCur;        this.$emit('setPageCur', this.pageCur);        this.nextCur=this.pageCur+1;        this.checkNextCur()      },      goPage(){        this.pageCur=this.nextCur;        this.$emit('setPageCur',  this.pageCur);      },      checkNextCur(){        if(this.nextCur>this.totalPages){          this.nextCur=this.totalPages        }      }    }  }</script><style lang="scss" scoped>  .pagination{    margin: 0;    li{      margin-right:-0.5em;      h3{        margin-top: 10px;        .red{          color: red;        }      }      &:first-child{        min-width: 196px;      }      .input{        width: 50px;        text-align: center;        display: inline-block;      }      .go-btn{        width:58px;        padding: 0 0 0 6px;        text-align: center;        height: 44px;        line-height: 44px;        position: relative;        top: -2px;        left: 1em;      }    }  }</style>

<pagination :totalElements="totalElements" :totalPages="totalPages"  @setPageCur="getPageCur"></pagination>

<script type="text/ecmascript-6">  import pagination from "../pagination"  export default {    data() {      return {        totalElements:1602,        totalPages:25,      }    },    components: {      pagination    },    methods:{      getPageCur(pageCur){        // alert(pageCur)      }    }  }</script>