資訊專欄INFORMATION COLUMN
摘要：這是一個翻頁的簡單實(shí)例，把案例在本地運(yùn)行一下，然后去理解每行的意思樣式代碼上一頁下一頁共頁代碼總頁數(shù)當(dāng)前頁碼頁碼點(diǎn)擊事件大于并且小于
這是一個翻頁的簡單實(shí)例，把案例在本地運(yùn)行一下，然后去理解每行的意思
樣式
ul,li{
margin: 0px;
padding: 0px;
}
li{
list-style: none
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar a{
border: 1px solid #ffffd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer
}
.page-bar a:hover{
background-color: #eee;
}
.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;
}
html代碼
javascrit代碼
var pageBar = new Vue({
el: ".page-bar",
data: {
all: 20, //總頁數(shù)
cur: 1,//當(dāng)前頁碼
},
methods: {
btnClick: function(data){//頁碼點(diǎn)擊事件
if(data != this.cur){
this.cur = data
}
}
},
computed: {
showLast: function(){
console.log(1);
if(this.cur == this.all){
return false
}
return true
},
showFirst: function(){
console.log(2);
if(this.cur == 1){
return false
}
return true
},
indexs: function(){
var left = 1
var right = this.all
var ar = []
if(this.all>= 11){
if(this.cur > 5 && this.cur < this.all-4){//大于6并且小于16
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
}
},
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79765.html
摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...
摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實(shí)踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...
摘要：中文官網(wǎng)英文官網(wǎng)組織發(fā)出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業(yè)余之外抽出的時間有限，充分準(zhǔn)備好應(yīng)有的資源之后再發(fā)問，有利于問題能夠高效質(zhì)量地得到解決。 Vue.js資源分享 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/maid...
摘要：學(xué)習(xí)了一段時間，拿它來做個小組件，練習(xí)一下。源碼放在文末的地址上。接下來看下評論組件條評論這里的將在下面提到，是我們獲取數(shù)據(jù)的位置。最后一個是目前生成獲取靜態(tài)數(shù)據(jù)的文件頭像用戶名評論內(nèi)容就這樣了吧。 學(xué)習(xí)了vue.js一段時間，拿它來做2個小組件，練習(xí)一下。我這邊是用webpack進(jìn)行打包，也算熟悉一下它的運(yùn)用。源碼放在文末的 github 地址上。 首先是index.html ...
閱讀 2016·2021-09-13 10:23
閱讀 2352·2021-09-02 09:47
閱讀 3808·2021-08-16 11:01
閱讀 1227·2021-07-25 21:37
閱讀 1610·2019-08-30 15:56
閱讀 544·2019-08-30 13:52
閱讀 3138·2019-08-26 10:17
閱讀 2456·2019-08-23 18:17
