Vue實現點擊按鈕進行上下頁切換
本文實例為大傢分享瞭Vue實現點擊按鈕進行上下頁切換的具體代碼,供大傢參考,具體內容如下
案例效果:
完整代碼如下:
<template> <div id="page"> <button class="btn" @click="prePage()">上一頁</button> <ul> <li :class="selected == index ?'page1':'page'" v-for="(item,index) of pageCount" :key="index">{{item}}</li> </ul> <button class="btn" @click="nextPage()">下一頁</button> </div> </template> <script> export default { data() { return { pageCount: 10, //總頁數 selected: 0 //已選擇的頁,默認開始時為第一頁 //因為是與下標index作比較,所以要從0開始;0代表第一頁,依次類推 } }, methods: { //上一頁 prePage() { //如果已經在第一頁,點擊按鈕頁碼不變並彈出提示 if (this.selected == 0) { this.selected; alert('已經是第一頁!'); //否則當前頁數-1 } else { this.selected = this.selected - 1; } }, //下一頁 nextPage() { //如果已經在最後一頁,點擊按鈕頁碼不變並彈出提示 if (this.selected == this.pageCount - 1) { this.selected; alert('已是最後一頁!'); } else { //否則當前頁數+1 this.selected = this.selected + 1; } } } } </script> <style scoped lang="less"> * { font-size: 14px; font-weight: normal; } #page { display: flex; width: 80%; margin: auto; .btn { width: 70px; height: 35px; color: white; font-weight: bold; border: 0; margin: 0 5px; } .btn:hover { cursor: pointer; } .btn:active { background-color: #787878; } } ul { list-style: none; /*未選中時的頁碼樣式*/ li, .page { float: left; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid lightskyblue; color: lightskyblue; margin: 0 3px; } /*選中後的頁碼樣式*/ .page1 { background-color: lightskyblue; color: white; } } </style>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。