Dieser Artikel stellt Ihnen hauptsächlich die native Schreibmethode des Paging vor, die in einen HTML-Teil und einen JS-Teil unterteilt ist. Er ist einfach und leicht zu verstehen und hat einen Referenzwert kann darauf verweisen
Dieser Artikel stellt hauptsächlich die native Schreibmethode des Paging basierend auf Vue vor.
Veröffentlichen Sie zuerst das Rendering:

HTML-Teil, verwenden Sie die Seite als separate Komponente
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type= "text/x-template" id= "page" >
<ul class = "pagination" >
<li v-show= "current != 1" @click= "current-- && goto(current)" >
<a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >上一页</a>
</li>
<li v- for = "index in pages" @click= "goto(index)" : class = "{'active':current == index}" :key= "index" >
<a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >{{index}}</a>
</li>
<li v-show= "allpage != current && allpage != 0 " @click= "current++ && goto(current++)" >
<a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >下一页</a>
</li>
</ul>
</script>
<p id= "app" >
<page></page>
</p>
|
Nach dem Login kopieren
js-Teil:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <script>
Vue.component( "page" , {
template: "#page" ,
data: function () {
return {
current: 1,
showItem: 5,
allpage: 13
}
},
computed: {
pages: function () {
var pag = [];
if (this.current < this.showItem) {
var i = Math.min(this.showItem, this.allpage);
while (i) {
pag.unshift(i--);
}
} else {
var middle = this.current - Math. floor (this.showItem / 2),
i = this.showItem;
if (middle > (this.allpage - this.showItem)) {
middle = (this.allpage - this.showItem) + 1
}
while (i--) {
pag.push(middle++);
}
}
return pag
}
},
methods: {
goto : function (index) {
if (index == this.current) return ;
this.current = index;
}
}
})
var vm = new Vue({
el: '#app',
})
</script>
|
Nach dem Login kopieren
CSS-Teil:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | body {
font-family: "Segoe UI" ;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.pagination {
position: relative;
}
.pagination li {
display: inline-block;
margin: 0 5px;
}
.pagination li a {
padding: .5rem 1rem;
display: inline-block;
border: 1px solid #ddd;
background: #fff;
color: #0E90D2;
}
.pagination li a:hover {
background: #eee;
}
.pagination li.active a {
background: #0E90D2;
color: #fff;
}
|
Nach dem Login kopieren
Die Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Eine Zusammenfassung von Beispielen, wie Angularjs die Kommunikation zwischen Controllern implementiert
Verwendung des Better-Scroll-Plugins -in in Angular Method_AngularJS
Verwenden Sie Node, um Ihr eigenes Befehlszeilentool-Methoden-Tutorial zu erstellen
Das obige ist der detaillierte Inhalt vonPaginierung basierend auf vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!