vuejs2.0如何实现分页组件-创新互联
这篇文章主要介绍vuejs2.0如何实现分页组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
阳原ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为
创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！
首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options )
var barHtml = ''+
''+
'1">上一页'+
'上一页'+
''+
'{{ index }}'+
''+
'下一页'+
'下一页'+
'- 共{{all}}页
'+
'
'+
'
';
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代码
{{msg}}
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封装了一下分页组件。
实现效果
{{msg}}
var barHtml = ''+
''+
'1">上一页'+
'上一页'+
''+
'{{ index }}'+
''+
'下一页'+
'下一页'+
'- 共{{all}}页
'+
'
'+
' ';
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+ '页';
}
}
})
以上是“vuejs2.0如何实现分页组件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：vuejs2.0如何实现分页组件-创新互联
网站网址：
http://chengdu.cdxwcx.cn/article/dohhci.html
