vue 分页

仅作为自己学习的记录。

html

<nav class="navigation">  <ul class="pagination">    <li class="Previous" v-on:click="prev">上一页</li>    <li>      <a href="javascript:void(0);" v-for="item in pages" v-on:click="p(item)" v-bind:class="{nowStyle:page == item}"> {{ item }}</a>    </li>    <li class="Next" v-on:click="next">下一页</li>  </ul></nav>

css

.navigation {  display: flex;  float: right;  padding-top: 15px;}.pagination {  display: flex;  li{    margin-left: 10px;    cursor: pointer;    a{      padding: 2px 6px;      background: #ededed;      margin: 0 4px;    }    a.nowStyle{      background: #3dbff5;      color: #ffffff;    }  }}

js

export default {  data () {    return {      pages: [],      page: 1,    }  },  created () {    // 页面加载时获取页数    var that = this    var params = {page: 1}    that.$api.post('###', params, function (req) {      that.pages = req.content.pages    })  },  methods: {    // 上一页    prev () {      var that = this      that.page = that.page - 1 < 1 ? 1 : that.page - 1      that.searchs()    },    // 下一页    next () {      var that = this      that.page = parseInt(that.page) + 1 > that.pages ? that.pages : parseInt(that.page) + 1      that.searchs()    },    // 选择第几页    p (p) {      var that = this      that.page = p      that.searchs()    },    // 后台获取页数    searchs () {      var that = this      var params = {page: that.page}      that.$api.post('###', params, function (req) {        that.pages = req.content.pages      })    }  }}

跳转页数版本

html

<nav class="navigation">  <ul class="pagination">    <li class="Previous" v-on:click="first">首页</li>    <li class="Previous" v-on:click="prev">上一页</li>    <li>      <a href="javascript:void(0);" class="nowStyle"> {{ page }}</a>    </li>    <li><input type="text" class="pageinput" ref="pageinput" @keyup.enter="press"></li>    <li class="Next" v-on:click="next">下一页</li>    <li class="Next" v-on:click="last">尾页</li>  </ul></nav>

js

export default {  data () {    return {      pages: [],      page: 1,      lists: [],      pageinput: ''    }  },  created () {    var that = this    var params = {page: 1}    that.$api.post('###', params, function (req) {      that.pages = req.content.pages    })  },  methods: {      // 回车跳转    press () {      var that = this      that.pageinput = that.$refs.pageinput.value      if (that.pageinput <= that.pages) {        that.page = that.pageinput        that.searchs()      }    },      // 首页    first () {      var that = this      that.page = that.page - that.page + 1      that.$refs.pageinput.value = ''      that.searchs()    },      // 尾页    last () {      var that = this      that.page = that.pages      that.$refs.pageinput.value = ''      that.searchs()    },      // 上一页    prev () {      var that = this      that.page = that.page - 1 < 1 ? 1 : that.page - 1      that.$refs.pageinput.value = ''      that.searchs()    },      // 下一页    next () {      var that = this      that.page = parseInt(that.page) + 1 > that.pages ? that.pages : parseInt(that.page) + 1      that.$refs.pageinput.value = ''      that.searchs()    },    searchs () {      var that = this      var params = {page: that.page}      that.$api.post('order/orderList', params, function (req) {        that.lists = req.content.list        that.pages = req.content.pages      })    }  }}