后台-插件-广告管理-内容页广告位一(手机)

您现在的位置是:首页 > 编程语言 > JavaScriptJavaScript

Vue 实用分页paging实例代码

2021-05-19 13:13:31JavaScript人已围观

简介本篇文章主要介绍了Vue 实用分页paging实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

直接上代码。只有一个小小的需要注意的点:vue1.x的v-for循环是从0开始,遵从了程序语言设计的一贯的做法,而vue2.x是从1开始的,符合我们平常的习惯。用下来还是vue2.x的做法方便一些,不需要绕一下子了。

//html
<div id="paging">
<span v-on:click="switchPage(curPage - 1)">prev</span>
<span v-for="item in sum" v-bind:class="{'current-page': item == curPage}" v-text="item" v-on:click="switchPage(item)"></span>
<span v-on:click="switchPage(curPage + 1)">next</span>
</div>
//js
var paging = new Vue({
 el: '#paging',
 data: {
  sum: 4, //总页数
  curPage: 1, //当前页
 },
 methods: {
  getBooks: function(page){
   //页面初始化函数
  },
  switchPage: function(page){
   var vm = this;
   if(page < 1) {
    page = 1;
   } else if(page > vm.sum) {
    page = vm.sum;
   }
   vm.getBooks(page);
   vm.curPage = page;
  },
 }
})
//css
span {
 display: inline-block;
 margin: 3px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 text-align: center;
 color: pink;
 background: #fff;
 border-radius: 5px;
}
span.current-page,
span:hover {
 color: #fff;
 background: pink;
}

效果如下:

文章来源:https://www.jb51.net/article/110936.htm

Tags:vue 分页 vue.js vue分页组件 

很赞哦! ()

后台-插件-广告管理-内容页广告位二(手机)
后台-插件-广告管理-内容页广告位三(手机)
后台-插件-广告管理-内容页广告位四(手机)

文章评论

留言与评论(共有 0 条评论)
   
验证码:

本栏推荐

站点信息

  • 文章统计49227篇文章
  • 浏览统计3200次浏览
  • 评论统计1个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们