最近利用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) 输入框中空  点击搜索,页面刷新(这种方法不是太好,练习可用)

有不足和错误,请指正。

生命不息,折腾不止。
我就要这几个杯子里的中杯 -- !
罗老师别这样 !--

Vue下简单分页及搜索功能的更多相关文章

  1. 原生javascript实现分页效果+搜索功能

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...

  2. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  3. ElasticSearch(五):简单的ElasticSearch搜索功能

    这里主要是一些简单的ElasticSearch的搜索功能,复杂的搜索,比如过滤,聚合等以后单独在写 1. 搜索全部 GET book/_search 直接搜索全部,下面是对搜索结果的详细介绍:默认情况 ...

  4. jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)

    第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...

  5. 用vue实现简单分页

    在这个demo中,我用vue对一个json文件中的数据进行了简单的分页,没用用到交互,一下是我的实现过程. 基础逻辑 1.将json文件引入app.vue,并作为data返回 data(){ var ...

  6. yii2下拉框带搜索功能

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...

  7. 用vue实现简单实时汇率计算功能

    最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...

  8. 使用node+vue实现简单的WebSocket聊天功能

    最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧, 首先, ...

  9. Vue几行代码实现搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [BZOJ4011][HNOI2015]落忆枫音:拓扑排序+容斥原理

    分析 又是一个有故事的题目背景.作为玩过原作的人,看题目背景都快看哭了ToT.强烈安利本境系列,话说SP-time的新作要咕到什么时候啊. 好像扯远了嘛不管了. 一句话题意就是求一个DAG再加上一条有 ...

  2. java复制项目中的补丁,完整的包路径

    package com.bytter.audit.iface.util; import java.io.BufferedInputStream; import java.io.BufferedOutp ...

  3. bootstraptable表格columns 隐藏方法

    隐藏:  visible: false,   显示:visible: true, visible属性没有true或者false,是visible,invisible和gone.visible:可见的: ...

  4. python双划线类型

    通过__开始的属性感觉分为两种类型: 利用dir调用的时候: < build in x object at 0x01F116B0>:这种貌似和运算符重载有关系,用户如果需要的话可以重写该函 ...

  5. [LeetCode]-algorithms-Median of Two Sorted Arrays

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  6. 高级软件测试技术-任务进度和总结-Day04

    任务进度11-16 使用工具 Jira 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 经过了这几天的学习和小组成员的努力,虽然其中还准备了考试,但是大家还是最终按时完成了任务,今 ...

  7. nginx中lua动态返回文件

    原来还可以这么操作,lua动态获取内容然后返回,下面是实例,可以做到先返回一个字符串,然后过5秒再返回另外一个字符串 ngx.say("hello") ngx.flush(true ...

  8. 常见iPhone设备尺寸及分辨率(持续更新)

    开发中常用的px与pt区别 px就是表示pixel,像素,是屏幕上显示数据的最基本的点: pt就是point,是印刷行业常用单位,等于1/72英寸. px全称为pixel,是一个点,它不是自然界的长度 ...

  9. 关于自定义 List集合排序的方法!

    大致流程: 排序是用到排序的接口Comparator<T>你要先建一个类实现比较器Comparator //大致流程public class StuComp implements Comp ...

  10. Jmeter接口测试系列之保存断言结果到文件

    在执行完接口测试用例后,我们需要将失败的用例结果统一保存到文件中,可以使用“断言结果”组件,并定制输出内容. 1.配置断言结果组件输出 (1.在文件名中配置需要保存的文件路径和文件名: (2.勾选仅日 ...