vuejs2.0怎么實(shí)現(xiàn)分頁(yè)組件
這篇文章主要介紹“vuejs2.0怎么實(shí)現(xiàn)分頁(yè)組件”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vuejs2.0怎么實(shí)現(xiàn)分頁(yè)組件”文章能幫助大家解決問題。
陽(yáng)原網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),陽(yáng)原網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為陽(yáng)原上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的陽(yáng)原做網(wǎng)站的公司定做！
首先使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”,Vue.extend( options )
var barHtml = ''+
''+
'1">上一頁(yè)'+
'上一頁(yè)'+
''+
'{{ index }}'+
''+
'下一頁(yè)'+
'下一頁(yè)'+
'- 共{{all}}頁(yè)
'+
'
'+
'
';
var navBar = Vue.extend({
template:barHtml,
props:['all','cur'],
computed: {
indexs: function(){
var left = 1;
var right = this.all;
var ar = [];
if(this.all>= 5){
if(this.cur > 3 && this.cur < this.all-2){
left = this.cur - 2
right = this.cur + 2
}else{
if(this.cur<=3){
left = 1
right = 5
}else{
right = this.all
left = this.all -4
}
}
}
while (left <= right){
ar.push(left)
left ++
}
return ar
}
},
methods: {
btnclick: function(data){
if(data != this.cur){
this.cur = data;
this.$emit('btn-click',data);
}
},
pageClick: function(){
this.$emit('btn-click',this.cur);
}
},
});
window.pagenav = navBar;
這兒創(chuàng)建了一個(gè)全局的pagenav，可以在其它地方都可以調(diào)用。
html代碼
{{msg}}
css代碼
.page-bar{
margin:40px;
}
ul,li{
margin: 0px;
padding: 0px;
}
li{
list-style: none
}
.page-bar ul{
overflow: hidden;
}
.page-bar li{
float: left;
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar a{
display: block;
border: 1px solid #ddd;
text-decoration: none;
position: relative;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer
}
.page-bar a:hover{
background-color: #eee;
}
.page-bar a.banclick{
cursor:not-allowed;
}
.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;
}新建一個(gè)vue對(duì)象實(shí)例
var pageBar = new Vue({
el: '#page',
data: {
all: 8, //總頁(yè)數(shù)
cur: 1,//當(dāng)前頁(yè)碼
msg:''
},
components:{
'vue-nav':pagenav
},
watch: {
cur: function(oldValue , newValue){
console.log('監(jiān)聽cur前與后的值：');
console.log(arguments);
}
},
methods:{
listenDate:function(data){
this.cur = data;
this.msg = '你點(diǎn)擊了'+data+ '頁(yè)';
}
}
})簡(jiǎn)單的用js封裝了一下分頁(yè)組件。
實(shí)現(xiàn)效果
{{msg}}
重慶分公司
重慶分公司
