vue 2.0 在普通html页面的分页

CSS部分

/* 分页样式 */
.page {
    font-weight: 900;
    height: 40px;
    text-align: center;
    color: #888;
    margin: 20px auto 0;
    background: #f2f2f2;
    moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
  }

  .pagelist {
    font-size: 0;
    background: #fff;
    height: 50px;
    line-height: 50px;
  }

  .pagelist span {
    font-size: 12px;
  }

  .pagelist .jump {
    /* border: 1px solid #ccc; */
    padding: 2px 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 5px;
  }

  .pagelist .bgprimary {
    cursor: default;
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
  }

  .jumpinp input {
    width: 35px;
    height: 20px;
    font-size: 12px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
  }

  .ellipsis {
    padding: 0px 8px;
  }

  .jumppoint {
    margin-left: 30px;
  }

  .pagelist .gobtn {}

  .bgprimary {
    cursor: default;
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
  }

html部分

<div>
                <div class="page"  v-show="show">
                  <div class="pagelist">
                    <span class="jump"v-show="current_page>1" @click="pre()">上一页</span>
                    <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
                    <span class="ellipsis"  v-show="efont">...</span>
                    <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
                    <span class="ellipsis"  v-show="efont&&current_page<pages-4">...</span>

                    <span class="jump" @click="next()">下一页</span>
                    <span v-show="current_page<pages-1" class="jump" class="jump" @click="jumpPage(pages)">{{pages}}</span>

                    <span class="jumppoint">跳转到：</span>
                    <span class="jumpinp"><input type="text" v-model="changePage"></span>
                    <span class="jump gobtn" @click="jumpPage(changePage)">GO</span>
                  </div>
                </div>
</div>

js部分 

var app = new Vue({
  el: '#app',
  data: {
      pages: 50, // 总页数
      current_page: 1, // 当前页
      changePage: '', // 跳转页
  },
  computed: {
      show: function() {
          return this.pages && this.pages != 1
      },
      efont: function() {
      if (this.pages <= 7) return false;
      return this.current_page > 5
      },
      indexs: function() {
      var left = 1;
          var right = this.pages;
          var ar = [];
      if (this.pages >= 7) {
          if (this.current_page > 5 && this.current_page < this.pages - 4) {
          left = Number(this.current_page) - 3;
          right = Number(this.current_page) + 3;
          } else {
          if (this.current_page <= 5) {
              left = 1;
              right = 7;
          } else {
              right = this.pages;

              left = this.pages - 6;
          }
          }
      }
      while (left <= right) {
          ar.push(left);
          left++;
      }
      return ar;
      }
  },
  methods: {
      // 上一页
      pre() {
          this.current_page--;
      },
      // 下一页
      next() {
          this.current_page++;
      },
      // 跳转页面
      jumpPage: function(id) {
          this.current_page = id;
      },

  },
})