溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用Vue2.0怎么實現一個分頁跳轉效果？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分頁</title>
<style>
*{margin: 0;padding: 0;}
#page-break{margin-top: 20px;margin-left: 20px;}
#page-break li{list-style: none;}
#page-break a{border: 1px solid #ddd; text-decoration: none;float: left;padding: 6px 12px;color: #337ab7;cursor: pointer}
#page-break a:hover{background-color: #eee;}
#page-break a .banclick{cursor: not-allowed;}
#page-break .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;}
#page-break i{font-style: normal;color: #d44950;margin: 0px 4px;font-size: 12px;}
#page-break .jumpbox .jumppage {border: 1px solid #ddd; margin-left: 40px; height: 33px; width: 40px; float: left;}
#page-break .jumpbox .jumpbtn {cursor: pointer; margin-left: 10px;}
#page-break .jumpbox .jumpbtn:active {color: #337ab7;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="page-break">
<ul>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()">上一頁</a>
</li>
<li v-if="cur==1">
<a class="banclick">上一頁</a>
</li>
<li v-for="item in indexs" v-bind:class="{'active':cur==item}">
<a v-on:click="btnClick(item), pageClick()">{{item}}</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()">下一頁</a>
</li>
<li v-if="cur==all">
<a class="banclick">下一頁</a>
</li>
<li><a>共<i>{{all}}</i>頁</a></li>
<div class="jumpbox">
<input type="number" class="jumppage" />
<a class="jumpbtn" v-on:click="pageSkip()">跳轉</a>
</div>
</ul>
</div>
</body>
</html>js代碼如下：
new Vue({
el: '#page-break',
data: {
cur: 1,
all: 20
},
watch: {
cur: function(newValue, oldValue){
console.log(arguments);
}
},
methods: {
btnClick(num){
if(num!=this.cur){
this.cur=num;
}
},
pageClick(){
console.log('現在是'+this.cur+'頁')
},
pageSkip(){
var maxPage = this.all;
var skipPage = Number(document.getElementsByClassName("jumppage")[0].value);
console.log(typeof skipPage);
if(!skipPage){
alert("請輸入跳轉頁碼");
return;
}else if(skipPage<1 || skipPage>maxPage){
alert("您輸入的頁碼超過頁數范圍了！");
return;
}else{
//this.cur=skipPage;
this.btnClick(skipPage);
this.pageClick();
}
}
},
computed: {
indexs(){
var left = 1;
var right = this.all;
var arr = [];
if(this.all>=7){
if(this.cur>4 && this.cur<this.all-3){
left = this.cur-3;
right = this.cur+3;
}else if(this.cur<=4){
left=1;
right=7;
}else{
left=this.all-6;
right=this.all;
}
}
while(left<=right){
arr.push(left);
left++;
}
return arr;
}
}
})看完上述內容，你們掌握利用Vue2.0怎么實現一個分頁跳轉效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
