文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用vue实现分页组件

2023-07-04 13:04

关注

这篇文章主要介绍了怎么用vue实现分页组件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用vue实现分页组件文章都会有所收获,下面我们一起来看看吧。

首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options )

var barHtml = '<div class="page-bar">'+   '<ul>'+   '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>'+   '<li v-if="cur==1"><a class="banclick">上一页</a></li>'+   '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+    '<a v-on:click="btnclick(index)">{{ index }}</a>'+   '</li>'+   '<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>'+   '<li v-if="cur == all"><a class="banclick">下一页</a></li>'+   '<li><a>共<i>{{all}}</i>页</a></li>'+   '</ul>'+  '</div>'; var navBar = Vue.extend({ template:barHtml, props:['all','cur'], computed: {  indexs: function(){  var left = 1;  var right = this.all;  var ar = [];  if(this.all>= 5){  if(this.cur > 3 && this.cur < this.all-2){   left = this.cur - 2   right = this.cur + 2  }else{   if(this.cur<=3){   left = 1   right = 5   }else{   right = this.all   left = this.all -4   }  }  }  while (left <= right){  ar.push(left)  left ++  }  return ar  }  }, methods: {  btnclick: function(data){  if(data != this.cur){   this.cur = data;   this.$emit('btn-click',data);   }  },  pageClick: function(){  this.$emit('btn-click',this.cur);  } },  }); window.pagenav = navBar;

这儿创建了一个全局的pagenav,可以在其它地方都可以调用。

html代码

<div id="page"> <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav> <p >{{msg}}</p></div>

css代码

.page-bar{ margin:40px;}ul,li{ margin: 0px; padding: 0px;}li{ list-style: none}.page-bar ul{ overflow: hidden;}.page-bar li{ float: left;}.page-bar li:first-child>a { margin-left: 0px}.page-bar a{ display: block; border: 1px solid #ddd; text-decoration: none; position: relative; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer}.page-bar a:hover{ background-color: #eee;}.page-bar a.banclick{ cursor:not-allowed;}.page-bar .active a{ color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}.page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px;}

新建一个vue对象实例

var pageBar = new Vue({ el: '#page', data: {  all: 8, //总页数  cur: 1,//当前页码  msg:'' }, components:{  'vue-nav':pagenav }, watch: {  cur: function(oldValue , newValue){  console.log('监听cur前与后的值:');  console.log(arguments);  } },  methods:{  listenDate:function(data){  this.cur = data;  this.msg = '你点击了'+data+ '页';  } } })

简单的用js封装了一下分页组件。

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta charset="utf-8"><title></title><meta name="keywords" content="" /><meta name="description" content="" /><script type="text/javascript" src="js/vue.min2.js"></script><style>.page-bar{ margin:40px;}ul,li{ margin: 0px; padding: 0px;}li{ list-style: none}.page-bar ul{ overflow: hidden;}.page-bar li{ float: left;}.page-bar li:first-child>a { margin-left: 0px}.page-bar a{ display: block; border: 1px solid #ddd; text-decoration: none; position: relative; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer}.page-bar a:hover{ background-color: #eee;}.page-bar a.banclick{ cursor:not-allowed;}.page-bar .active a{ color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}.page-bar i{ font-style:normal; color: #d44950; margin: 0px 4px; font-size: 12px;}</style></head><body><div id="page"> <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav> <p >{{msg}}</p></div><script type="text/javascript"> var barHtml = '<div class="page-bar">'+   '<ul>'+   '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>'+   '<li v-if="cur==1"><a class="banclick">上一页</a></li>'+   '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+    '<a v-on:click="btnclick(index)">{{ index }}</a>'+   '</li>'+   '<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>'+   '<li v-if="cur == all"><a class="banclick">下一页</a></li>'+   '<li><a>共<i>{{all}}</i>页</a></li>'+   '</ul>'+  '</div>'; var navBar = Vue.extend({ template:barHtml, props:['all','cur'], computed: {  indexs: function(){  var left = 1;  var right = this.all;  var ar = [];  if(this.all>= 5){  if(this.cur > 3 && this.cur < this.all-2){   left = this.cur - 2   right = this.cur + 2  }else{   if(this.cur<=3){   left = 1   right = 5   }else{   right = this.all   left = this.all -4   }  }  }  while (left <= right){  ar.push(left)  left ++  }  return ar  }  }, methods: {  btnclick: function(data){  if(data != this.cur){   this.cur = data;   this.$emit('btn-click',data);   }  },  pageClick: function(){  this.$emit('btn-click',this.cur);  } },  }); window.pagenav = navBar; var pageBar = new Vue({ el: '#page', data: {  all: 8, //总页数  cur: 1,//当前页码  msg:'' }, components:{  'vue-nav':pagenav }, watch: {  cur: function(oldValue , newValue){  console.log('监听cur前与后的值:');  console.log(arguments);  } },  methods:{  listenDate:function(data){  this.cur = data;  this.msg = '你点击了'+data+ '页';  } } })</script></body></html>

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

关于“怎么用vue实现分页组件”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么用vue实现分页组件”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯