Vue下簡單分頁及搜索功能

最近利用Vue和element ui仿寫了個小頁面，記一哈分頁和搜索功能的簡單實現。

首頁   emmmm.....

搜索框輸入.....

 

搜索完成

 

 

 

 

 數據是直接寫在這里面的：

 cardPhoto:[
                    {   
                        name: '少女風十足！可愛萌妹子',
                        href: '/details',
                        img: require('@/assets/1/1.jpg'),
                        time: '2019-09-22',
                    },

                   .........
                   .........
                   .........
       ]

element ui 中的分頁

 <!--分頁-->
          <div class="block">
            <el-pagination
              background
              :current-page.sync="currentPage"
              :page-sizes="[3, 6, 9, 12]"
              :page-size="num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="cardPhoto.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        
 data() {
            return {
                num: 3, //每頁顯示
                currentPage: 1, //當前頁
               }
        }

methods : {

      //每頁條數
     handleSizeChange(val) {
         this.num = val
     },
     //當前頁
     handleCurrentChange(val) {
         this.currentPage = val
     },

}

主頁照片：

   <div class="card">                                             <!--當前頁-1*每頁數，當前頁*每頁數-->
            <div class="card-box" v-for="card in cardPhoto.slice((currentPage-1)*num, currentPage*num)" :key="card">
              <div class="card-img">
                <a href="javascript:void(0);" @click="routeGo(card)"><img :src="card.img" width="270px"/></a>
                <div class="info">
                  <el-row><a href="javascript:void(0);" @click="routeGo(card)">{{card.name}}</a></el-row>
                  <time class="time">{{ card.time }}</time>
                </div>
              </div>
            </div>
          </div>

實現分頁的關鍵：

cardPhoto.slice((currentPage-1)*num, currentPage*num)

v-for對小盒子遍歷時進行對應顯示
slice()方法提取某個數組的一部分，並返回一個新的數組，且不會改動原數組比如當前頁是第一頁，每頁仨數據，那就提取(1-1*3，1*3) => (0,3)也就是索引 0，1，2的數據
因為起止參數包括開始索引，不包括結束索引。
至此分頁已成。，。


搜索欄：

<input class="seach-input" type="text" aria-placeholder="搜一搜，看一看" v-model="search"/>
<button class="search-btn" type="submit" @click="searchCont">搜索</button>

別忘了在data() 下添加 search: ' ',  

        // 搜索
            searchCont() {
                var search = this.search
                if(search) {
                    this.cardPhoto = this.cardPhoto.filter((cardPhoto) => {
                        return String(cardPhoto.name).indexOf(search) !== -1
                    })
                }else {
                    history.go(0)   
                }
                 this.search = ''
            },

filert  把Array的某些元素過濾掉，然后返回剩下的元素。

具體去： https://www.liaoxuefeng.com/wiki/1022910821149312/1024327002617536

stringObject.indexOf( )

indexOf()返回（）中出現的位置，沒有返回-1，所以  只輸出   ！==  -1的值，

 輸入cardPhoto.name里的值就可以搜索了，。，

具體去：https://www.w3school.com.cn/jsref/jsref_indexOf.asp

history.go(0) 輸入框中空  點擊搜索，頁面刷新（這種方法不是太好，練習可用）

有不足和錯誤，請指正。


生命不息，折騰不止。
我就要這幾個杯子里的中杯 -- ！  
       羅老師別這樣  ！--