杩欑瘒鏂囩珷涓昏涓哄ぇ瀹惰缁嗕粙缁嶄簡鍩轰簬vue.js鐨勫垎椤垫彃浠跺垎鏋?/a>锛屽叿鏈変竴瀹氱殑鍙傝€冧环鍊硷紝鍙互鐢ㄦ潵鍙傝€冧竴涓嬨€?/p> 鎰熷叴瓒g殑灏忎紮浼达紝涓嬮潰涓€璧疯窡闅?12绗旇鐨勫皬缂栦袱宸存帉鏉ョ湅鐪嬪惂锛?/p> Vue.js 鐨勭洰鏍囨槸閫氳繃灏藉彲鑳界畝鍗曠殑 API 瀹炵幇鍝嶅簲鐨勬暟鎹粦瀹氬拰缁勫悎鐨勮鍥剧粍浠躲€傛兂浜嗚В鏇村锛岃鎴砲ttp://cn.vuejs.org/ html浠g爜锛?/p> 浠g爜濡備笅锛?/p> <div class="page-bar" v-else> <ul> <li style="width: 11%" v-if="showFirst"> <a v-on:click="cur--"> <<</a> </li> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{index}}</a> </li> <li style="width: 11%" v-if="showLast"><a v-on:click="cur++"> >></a></li> <li style="width: 22%;margin-left: 7%"><a>鍏?lt;i>{{all}}</i>椤?lt;/a></li> </ul> </div> css閮ㄥ垎锛屽彲鏍规嵁鑷繁鐨勫疄闄呴渶瑕佽繘琛岃皟鏁达細 浠g爜濡備笅锛?/p> .page-bar { margin-top: 21px; margin-left: 11%; } .page-bar ul, .page-bar li { margin: 0px; padding: 0px; } .page-bar ul li { list-style: none; border: 1px solid #ddd; text-decoration: none; position: relative; float: left; text-align: center; padding: 1px 0; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer; width: 8%; } .page-bar li:first-child>a { margin-left: 0px } .page-bar .active a { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .page-bar i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 12px; } js閮ㄥ垎锛?/p> 棣栧厛瑕佸垱寤轰竴涓熀鏈粍浠?/p> 浠g爜濡備笅锛?/p> var vm = new Vue({ el: 'body', data: { list: null, all: 1, //鎬婚〉鏁? cur: 1, //褰撳墠椤电爜 }, 缁ц€岃鍒╃敤computed璁$畻椤电爜锛?/p> 浠g爜濡備笅锛?/p> computed: { indexs: function(index) { var left = 1; var right = this.all; var ar = []; if (this.all >= 11) { if (this.cur > 5 && this.cur < this.all - 4) { left = this.cur - 5; right = this.cur + 4; } else { if (this.cur <= 5) { left = 1; right = 10; } else { right = this.all; left = this.all - 9; } } } while (left <= right) { ar.push(left); left++; } return ar; }, showLast: function() { if (this.cur == this.all) { return false } return true }, showFirst: function() { if (this.cur == 1) { return false } return true } } 瑕佺粰 鍏冪礌鍔爒-on:click="cur++"浜嬩欢锛屾墍浠ヨ鍦╲ue閲屽姞method鏂规硶锛?/p> 浠g爜濡備笅锛?/p> methods: { btnClick: function(items) { //椤电爜鐐瑰嚮浜嬩欢 if (items != this.cur) { this.cur = items } } }, 鍏跺疄鍒拌繖閲屽熀鏈笂灏卞樊涓嶅浜嗭紝浣嗘槸鍙互浼樺寲涓€涓嬶紝褰撶敤鎴疯Е鍙戠偣鍑讳簨浠舵椂锛岄〉闈㈠彂鐢熸敼鍙橈紝杩欐椂瑕侀€氱煡鍏朵粬缁勪欢鍋氬嚭鏀瑰彉銆?/p> 浠g爜濡備笅锛?/p> watch: { cur: function(oldValue, newValue) { console.log(arguments) } } 瑙傚療浜哻ur鏁版嵁褰撳畠鏀瑰彉鐨勬椂鍊欙紝鍙互鑾峰彇鍓嶅悗鍊笺€傜劧鍚庨€氱煡鍏朵粬缁勪欢銆?/p> 鍚庢湡浼氬湪涓汉GitHub涓婃彁浜ゅ畬鏁寸増浠g爜 琛ュ厖鏁堟灉鍥惧睍绀?/p> 銆?12pic.com娓╅Θ鎻愮ず锛氬浘鐗囨殏缂恒€?/p> 浠ヤ笂灏辨槸鏈枃鐨勫叏閮ㄥ唴瀹癸紝甯屾湜瀵瑰ぇ瀹剁殑瀛︿範鏈夋墍甯姪锛屼篃甯屾湜澶у澶氬鏀寔512绗旇銆?/p> 鏈枃鏉ヨ嚜锛?a href="http://www.q1010.com/184/4220-0.html" rel="nofollow">http://www.q1010.com/184/4220-0.html
鎰熷叴瓒g殑灏忎紮浼达紝涓嬮潰涓€璧疯窡闅?12绗旇鐨勫皬缂栦袱宸存帉鏉ョ湅鐪嬪惂锛?/p>
Vue.js 鐨勭洰鏍囨槸閫氳繃灏藉彲鑳界畝鍗曠殑 API 瀹炵幇鍝嶅簲鐨勬暟鎹粦瀹氬拰缁勫悎鐨勮鍥剧粍浠躲€傛兂浜嗚В鏇村锛岃鎴砲ttp://cn.vuejs.org/
html浠g爜锛?/p>
浠g爜濡備笅锛?/p>
<div class="page-bar" v-else> <ul> <li style="width: 11%" v-if="showFirst"> <a v-on:click="cur--"> <<</a> </li> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index)">{{index}}</a> </li> <li style="width: 11%" v-if="showLast"><a v-on:click="cur++"> >></a></li> <li style="width: 22%;margin-left: 7%"><a>鍏?lt;i>{{all}}</i>椤?lt;/a></li> </ul> </div>
css閮ㄥ垎锛屽彲鏍规嵁鑷繁鐨勫疄闄呴渶瑕佽繘琛岃皟鏁达細
.page-bar { margin-top: 21px; margin-left: 11%; } .page-bar ul, .page-bar li { margin: 0px; padding: 0px; } .page-bar ul li { list-style: none; border: 1px solid #ddd; text-decoration: none; position: relative; float: left; text-align: center; padding: 1px 0; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer; width: 8%; } .page-bar li:first-child>a { margin-left: 0px } .page-bar .active a { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .page-bar i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 12px; }
js閮ㄥ垎锛?/p>
棣栧厛瑕佸垱寤轰竴涓熀鏈粍浠?/p>
var vm = new Vue({ el: 'body', data: { list: null, all: 1, //鎬婚〉鏁? cur: 1, //褰撳墠椤电爜 },
缁ц€岃鍒╃敤computed璁$畻椤电爜锛?/p>
computed: { indexs: function(index) { var left = 1; var right = this.all; var ar = []; if (this.all >= 11) { if (this.cur > 5 && this.cur < this.all - 4) { left = this.cur - 5; right = this.cur + 4; } else { if (this.cur <= 5) { left = 1; right = 10; } else { right = this.all; left = this.all - 9; } } } while (left <= right) { ar.push(left); left++; } return ar; }, showLast: function() { if (this.cur == this.all) { return false } return true }, showFirst: function() { if (this.cur == 1) { return false } return true } }
瑕佺粰 鍏冪礌鍔爒-on:click="cur++"浜嬩欢锛屾墍浠ヨ鍦╲ue閲屽姞method鏂规硶锛?/p>
methods: { btnClick: function(items) { //椤电爜鐐瑰嚮浜嬩欢 if (items != this.cur) { this.cur = items } } },
鍏跺疄鍒拌繖閲屽熀鏈笂灏卞樊涓嶅浜嗭紝浣嗘槸鍙互浼樺寲涓€涓嬶紝褰撶敤鎴疯Е鍙戠偣鍑讳簨浠舵椂锛岄〉闈㈠彂鐢熸敼鍙橈紝杩欐椂瑕侀€氱煡鍏朵粬缁勪欢鍋氬嚭鏀瑰彉銆?/p>
watch: { cur: function(oldValue, newValue) { console.log(arguments) } }
瑙傚療浜哻ur鏁版嵁褰撳畠鏀瑰彉鐨勬椂鍊欙紝鍙互鑾峰彇鍓嶅悗鍊笺€傜劧鍚庨€氱煡鍏朵粬缁勪欢銆?/p>
鍚庢湡浼氬湪涓汉GitHub涓婃彁浜ゅ畬鏁寸増浠g爜
琛ュ厖鏁堟灉鍥惧睍绀?/p>
銆?12pic.com娓╅Θ鎻愮ず锛氬浘鐗囨殏缂恒€?/p>
浠ヤ笂灏辨槸鏈枃鐨勫叏閮ㄥ唴瀹癸紝甯屾湜瀵瑰ぇ瀹剁殑瀛︿範鏈夋墍甯姪锛屼篃甯屾湜澶у澶氬鏀寔512绗旇銆?/p>
鏈枃鏉ヨ嚜锛?a href="http://www.q1010.com/184/4220-0.html" rel="nofollow">http://www.q1010.com/184/4220-0.html
娉細鍏充簬鍩轰簬vue.js鐨勫垎椤垫彃浠跺垎鏋愮殑鍐呭灏卞厛浠嬬粛鍒拌繖閲岋紝鏇村鐩稿叧鏂囩珷鐨勫彲浠ョ暀鎰?a href="http://www.q1010.com" target="_blank">512绗旇鐨勫叾浠栦俊鎭€?/p>
鍏抽敭璇嶏細vue.js