利用Vue2.0怎么實現(xiàn)一個分頁跳轉效果

利用Vue2.0怎么實現(xiàn)一個分頁跳轉效果？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

10年積累的成都網(wǎng)站建設、成都網(wǎng)站制作經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設流程，更有蔡家坡免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

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('現(xiàn)在是'+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("您輸入的頁碼超過頁數(shù)范圍了！");
 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;
 }
 }
})

看完上述內(nèi)容，你們掌握利用Vue2.0怎么實現(xiàn)一個分頁跳轉效果的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當前題目：利用Vue2.0怎么實現(xiàn)一個分頁跳轉效果
URL鏈接：http://chinadenli.net/article34/gisspe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、網(wǎng)站建設、域名注冊、網(wǎng)站策劃、ChatGPT、動態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

利用Vue2.0怎么實現(xiàn)一個分頁跳轉效果