<meta charset="utf-8" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
<meta HTTP - equiv="X - UA - Compatible" content="ie=edge" & gt;
Document <script SRC='https://bbs.csdn.net/js/vue.js' & gt; </script>
<style>
The page - bar {
Margin: 40 px;
}
Ul, li {
Margin: 0 px;
Padding: 0 px;
}
Li {
The list - style: none
}
Page - bar li: first - child> A {
Margin - left: 0 px
}
Page - bar a {
Border: # 1 px solid DDD;
text-decoration: none;
position: relative;
float: left;
Padding: 6 px 12 px;
Margin - left: - 1 px;
The line - height: 1.42857143;
Color: # 337 ab7;
Cursor: pointer
}
. Page - bar a: hover {
Background - color: # eee;
}
The page - bar a. anclick {
Cursor: not allowed;
}
. The page - bar. The active a {
color: #fff;
Cursor: the default;
Background - color: # 337 ab7;
Border - color: # 337 ab7;
}
The page - bar I {
The font - style: normal;
Color: # d44950;
Margin: 0 px 4 px;
font-size: 12px;
}
</style>
<body>
Var pageBar=new Vue ({
El: 'page - bar',
Data: {
All: 28,//total number of pages
Cur: 1//the current page number
},
Watch: {
Cur: function (oldValue, newValue) {
The console. The log (the arguments);
}
},
Methods: {
BtnClick: function (data) {
If (data!=this. Cur) {
This. Cur=data;
}
},
PageClick: function () {
The console. The log (the 'now' + this. Cur + 'page');
}
},
The computed: {
Indexs: the function () {
Var left=1;
Var right=this. All;
Var ar=[];
If (this. All> {
=5)//the biggest range from 3 to 6, 7 if arrive, so below plus 2 into 9, are beyond the scope of the maximum value
If (this. Cur & gt; 3 & amp; & This. Cur & lt; This. All - 1) {
//4 as the reference datum, the left plus 2 right and 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 & lt;={right)
Ar. Push (left)
Left + +
}
The console. The log (ar);
Return the ar
}
}
})
</script>
