成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue入門－實(shí)現(xiàn)一個(gè)分頁組件(1.0.3版本)

wangzy2019 / 833人閱讀

摘要：關(guān)注前端社區(qū)的同學(xué)，一定知道。一個(gè)小巧優(yōu)雅框架。目前是正式版，然后中文文檔還沒更新上來。實(shí)現(xiàn)的一個(gè)分頁組件。有了角標(biāo)還需判斷前一頁下一頁的顯示增加和字段觀看模版發(fā)現(xiàn)指令很明顯當(dāng)內(nèi)容是就輸出否就沒。

vue

關(guān)注前端社區(qū)的同學(xué)，一定知道vue。一個(gè)小巧、優(yōu)雅 mvvm 框架。 目前是1.0.3正式版，然后中文文檔還沒更新上來。 使用了一段時(shí)間的感觸就是，我再也不想直接操作DOM了。數(shù)據(jù)綁定式的編程體驗(yàn)真是好。實(shí)現(xiàn)的一個(gè)分頁組件。

css 
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;
}
模版


在未引入js前,頁面的顯示,分析下,all字段簡單直接輸出即可,{{index}}是分頁碼這個(gè)需要一些動(dòng)態(tài)的渲染。

js 
var pageBar = new Vue({
    el: ".page-bar",
    data: {
        all: 20, //總頁數(shù)
        cur: 1,//當(dāng)前頁碼
});

調(diào)用 new Vue({參數(shù)}) 就是創(chuàng)建了一個(gè)基本的組件,賦值給變量 pageBar.
el就是element的縮寫,定位模版的位置.data就是數(shù)據(jù)了.
知道了總頁數(shù)但是要顯示頁碼還是要一番計(jì)算,所以顯示頁碼就是計(jì)算屬性了.
所以我們要用computed

computed: {
            indexs: function(){
              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
           }

ok這個(gè)頁碼顯示規(guī)則是參考Baidu搜尋的 返回值就是[2,3,4,5,6]之類。
有了角標(biāo)還需判斷前一頁、下一頁的顯示.增加showLast和showFirst字段（bool)
觀看html模版發(fā)現(xiàn)v-if指令.很明顯當(dāng)內(nèi)容是true就輸出,否就沒。
重點(diǎn)看下

   
  • 
        {{ index }}

    • v-for是循環(huán)渲染輸出計(jì)算屬性indexs.每一次循環(huán)的子元素賦值給index v-bind:class綁定class,當(dāng)渲染到目前的角標(biāo)的時(shí)候加個(gè)class v-on:click是綁定了事件，我把index當(dāng)參數(shù)傳進(jìn)入了,后面做判斷，默認(rèn)傳event事件.
    然后我們給Vue的選項(xiàng)里面再增加methods字段

     methods: {
            btnClick: function(data){//頁碼點(diǎn)擊事件
                if(data != this.cur){
                    this.cur = data 
                }
            }
        }
    組件交互

    組件寫完了，問題來了，用戶點(diǎn)擊發(fā)生頁面改變，你怎么通知其他組件作出相應(yīng)的變化. 可以在頁角發(fā)生改變的函數(shù)下，插一條語句通知其他組件。不過這種方法是很差的做法?？梢允褂?/p> 

    watch: {
    cur: function(oldValue , newValue){
                    console.log(arguments)
            }
}

    觀察了cur數(shù)據(jù)當(dāng)它改變的時(shí)候，可以獲取前后值。然后通知其他組件。

    完整的代碼可以看 github:vue-pagination

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86116.html

    相關(guān)文章

    • Vue.js資源分享

      摘要：中文官網(wǎng)英文官網(wǎng)組織發(fā)出一個(gè)問題之后，不要暫時(shí)的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個(gè)人工作還是業(yè)余之外抽出的時(shí)間有限，充分準(zhǔn)備好應(yīng)有的資源之后再發(fā)問，有利于問題能夠高效質(zhì)量地得到解決。 Vue.js資源分享 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/maid...

      vpants 評(píng)論0 收藏0

    • SpringBoot-vue 基于Java的微服務(wù)全?？焖匍_發(fā)實(shí)踐

      摘要：本項(xiàng)目將使用配合最簡單的邏輯來展示一個(gè)基于的微服務(wù)全?？焖匍_發(fā)實(shí)踐的。提供一系列大型項(xiàng)目常用的非功能性特征，比如內(nèi)嵌服務(wù)器，安全，指標(biāo)，健康檢測(cè)，外部化配置。 SprintBoot-Vue SpringBoot ＋ 前端MVVM 基于Java的微服務(wù)全?？焖匍_發(fā)實(shí)踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

      FleyX 評(píng)論0 收藏0

    • SpringBoot-vue 基于Java的微服務(wù)全棧快速開發(fā)實(shí)踐

      摘要：本項(xiàng)目將使用配合最簡單的邏輯來展示一個(gè)基于的微服務(wù)全?？焖匍_發(fā)實(shí)踐的。提供一系列大型項(xiàng)目常用的非功能性特征，比如內(nèi)嵌服務(wù)器，安全，指標(biāo)，健康檢測(cè)，外部化配置。 SprintBoot-Vue SpringBoot ＋ 前端MVVM 基于Java的微服務(wù)全?？焖匍_發(fā)實(shí)踐 showImg(https://segmentfault.com/img/remote/1460000010167913...

      neu 評(píng)論0 收藏0

    • 使用nuxt開發(fā)博客后臺(tái)管理系統(tǒng)（一）element ui的使用

      摘要：進(jìn)入主題使用我們?cè)趧?chuàng)建項(xiàng)目時(shí)已經(jīng)選擇安裝了，安裝完就能使用了。 注：文章中的nuxt為2.0.0版本 眾所周知vue單頁面應(yīng)用的seo很不友好，每次打開頁面先獲取的節(jié)點(diǎn)也就是一個(gè),而這對(duì)想用vue做spa又想擁有友好搜索引擎seo優(yōu)化的人來說就好比雞肋。好在vue的官方出了nuxt，既能讓我們使用spa又能擁有良好的搜索引擎優(yōu)化；nuxt介紹->https://zh.nuxtjs.or...

      Freeman 評(píng)論0 收藏0

    • Vue 實(shí)用分頁組件paging（頁數(shù)太多時(shí)顯示省略號(hào)）

      摘要：年更新之前的版本在頁數(shù)太多時(shí)依然每一頁都顯示，這顯然不合理。增強(qiáng)版在頁數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁組件單獨(dú)提取出來，可以直接在其他頁面引入使用。用下來還是的做法方便一些，不需要繞一下子了?？傢摂?shù)當(dāng)前頁頁面初始化函數(shù)參考文章 2017年6.26更新： 之前的版本在頁數(shù)太多時(shí)依然每一頁都顯示，這顯然不合理。增強(qiáng)版在頁數(shù)太多時(shí)會(huì)顯示省略號(hào)，且把分頁組件單獨(dú)提取出來，可以直接在其他頁面引入使...

      andycall 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <