vue:纯js分页(不操作数据库)--复制到页面即可用

页码：

<nav style="float:right;">
      <ul class="pagination pagination-lg" style="list-style-type:none;">
        <template v-for="page in Math.ceil(rows.length/pagesize)">
          <li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
          <li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
          <li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
          <li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li>
        </template>
      </ul>
    </nav>

 

js:

var data = {
    rows: [
      { id: 1, name: '小明', age: 18, school: '光明顶小学', remark: '明教教主' },
      { id: 2, name: '阿刚', age: 19, school: '峨眉派中学', remark: '灭绝师叔' },
      { id: 3, name: '吉姆', age: 20, school: '武当山大学', remark: '扫地阿姨' },
      { id: 4, name: '李雷', age: 21, school: '麻省学院', remark: '艺术特招生' },
      { id: 5, name: '韩梅', age: 22, school: '剑桥职校', remark: '万剑归宗' },
      { id: 6, name: '马东', age: 23, school: '五道口计院', remark: '物理学家' },
      { id: 7, name: '刘全', age: 24, school: '上海交大', remark: '糖醋鲤鱼' },
    ],
    pagesize: 3,
    curpage:1,//当前页的页码
    rowtemplate: { id: 0, name: '', age: '', school: '', remark: '' },
    contentResult:'',
    input:''
  };
  export default {
    data() {
      return data
    },
    mounted:function(){
      this.selectAll();
    },
    methods: {
//上一页方法
      PrePage: function (event) {
        $(".pagination .active").prev().trigger("click");
      },
      //下一页方法
      NextPage: function (event) {
        $(".pagination .active").next().trigger("click");
      },
      //点击页码的方法
      NumPage: function (num, event) {
        if (this.curpage == num) {
          return;
        }
        this.curpage = num;
        $(".pagination li").removeClass("active");
        if (event.target.tagName.toUpperCase() == "LI") {
          $(event.target).addClass("active");
        }
        else {
          $(event.target).parent().addClass("active");
        }
        if (this.curpage == 1) {
          $("#prepage").addClass("disabled");
        }
        else {
          $("#prepage").removeClass("disabled");
        }
        if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
          $("#nextpage").addClass("disabled");
        }
        else {
          $("#nextpage").removeClass("disabled");
        }
      }