新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
利用Vue2.0怎么實(shí)現(xiàn)一個(gè)分頁跳轉(zhuǎn)效果
利用Vue2.0怎么實(shí)現(xiàn)一個(gè)分頁跳轉(zhuǎn)效果?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程,更有蔡家坡免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
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("請(qǐng)輸入跳轉(zhuǎn)頁碼"); 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看完上述內(nèi)容,你們掌握利用Vue2.0怎么實(shí)現(xiàn)一個(gè)分頁跳轉(zhuǎn)效果的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
標(biāo)題名稱:利用Vue2.0怎么實(shí)現(xiàn)一個(gè)分頁跳轉(zhuǎn)效果
新聞來源:http://fisionsoft.com.cn/article/gisspe.html