<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>