vuejs2.0怎么實現(xiàn)分頁組件

這篇文章主要介紹“vuejs2.0怎么實現(xiàn)分頁組件”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vuejs2.0怎么實現(xiàn)分頁組件”文章能幫助大家解決問題。

陽原網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),陽原網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為陽原上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的陽原做網(wǎng)站的公司定做！

首先使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”,Vue.extend( options )

var barHtml = '<div class="page-bar">'+
   '<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="index in indexs" v-bind:class="{ active: cur == index}">'+
    '<a v-on:click="btnclick(index)">{{ index }}</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>'+
   '</ul>'+
  '</div>';
 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)建了一個全局的pagenav，可以在其它地方都可以調(diào)用。

html代碼

<div id="page">
 <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
 <p >{{msg}}</p>
</div>

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;
}

新建一個vue對象實例

var pageBar = new Vue({
 el: '#page',
 data: {
  all: 8, //總頁數(shù)
  cur: 1,//當前頁碼
  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 = '你點擊了'+data+ '頁';
  }
 }
 })

簡單的用js封裝了一下分頁組件。

實現(xiàn)效果

vuejs2.0怎么實現(xiàn)分頁組件

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/vue.min2.js"></script>
<style>
.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;
}
</style>
</head>
<body>
<div id="page">
 <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
 <p >{{msg}}</p>
</div>
<script type="text/javascript">
 var barHtml = '<div class="page-bar">'+
   '<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="index in indexs" v-bind:class="{ active: cur == index}">'+
    '<a v-on:click="btnclick(index)">{{ index }}</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>'+
   '</ul>'+
  '</div>';
 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;
 var pageBar = new Vue({
 el: '#page',
 data: {
  all: 8, //總頁數(shù)
  cur: 1,//當前頁碼
  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 = '你點擊了'+data+ '頁';
  }
 }
 })
</script>
</body>
</html>

關(guān)于“vuejs2.0怎么實現(xiàn)分頁組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

新聞名稱：vuejs2.0怎么實現(xiàn)分頁組件
文章URL：http://muchs.cn/article32/gpjisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、標簽優(yōu)化、云服務(wù)器、自適應(yīng)網(wǎng)站、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

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

網(wǎng)站建設(shè)網(wǎng)站維護公司