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) 输入框中空 点击搜索,页面刷新(这种方法不是太好,练习可用) 有不足和错误,请指正。 生命不息,折腾不止。
我就要这几个杯子里的中杯 -- !
罗老师别这样 !--
Vue下简单分页及搜索功能的更多相关文章
- 原生javascript实现分页效果+搜索功能
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...
- java简单的实现搜索框的下拉显示相关搜索功能
最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...
- ElasticSearch(五):简单的ElasticSearch搜索功能
这里主要是一些简单的ElasticSearch的搜索功能,复杂的搜索,比如过滤,聚合等以后单独在写 1. 搜索全部 GET book/_search 直接搜索全部,下面是对搜索结果的详细介绍:默认情况 ...
- jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
第一步: 引入我们用使用的插件 jquery: select2: css: js: 第二步: 创建一个html页面,body内容: <div> <select class=" ...
- 用vue实现简单分页
在这个demo中,我用vue对一个json文件中的数据进行了简单的分页,没用用到交互,一下是我的实现过程. 基础逻辑 1.将json文件引入app.vue,并作为data返回 data(){ var ...
- yii2下拉框带搜索功能
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...
- 用vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
- 使用node+vue实现简单的WebSocket聊天功能
最近学习了一下websocket的即时通信,感觉非常的强大,这里我用node启动了一个服务进行websocket链接,然后再vue的view里面进行了链接,进行通信,废话不多说,直接上代码吧, 首先, ...
- Vue几行代码实现搜索功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- [NOIP2012] 同余方程(第三次考试大整理)
1265. [NOIP2012] 同余方程 输入文件:mod.in 输出文件:mod.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 求关于 x 的同余方程 ax ...
- Xshell Linux常用命令
Xshell :一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议. 0 帮助 命令 与清屏 help 查看帮助命令 ls ...
- [CSP-S模拟测试]:取石子(博弈论+DP)
题目描述 有三堆石子,它们的石子个数分别为$x,y,z$.$A$和$B$正在博弈,由$A$先手,双方轮流操作.每次操作是指,选择若干堆($1-3$堆)石子,从中各取出相同数量的石子(不能$1$个都不取 ...
- [LeetCode]-DataBase-Nth Highest Salary
Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Sala ...
- 如何隐藏scroll-Y纵向滚动条,并不影响内容滚动的方法
网上搜了很多关于隐藏滚动条的文章,发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说.本文章将介绍3种隐藏滚动条的方法,大家可以结合实际情况,参考文章内 ...
- Java中String类中常用的方法
1.字符串与字符数组的转换 用toCharArray()方法将字符串变为字符数组 String str = "abcdef"; char c[] = str.tocharArray ...
- POJ 1625 Censored ( Trie图 && DP && 高精度 )
题意 : 给出 n 个单词组成的字符集 以及 p 个非法串,问你用字符集里面的单词构造长度为 m 的单词的方案数有多少种? 分析 :先构造出 Trie 图方便进行状态转移,这与在 POJ 2278 中 ...
- angular 语法的应用
angular.js 一个js框架 , 是三大主流框架之一:( vue react angular ): 原先的开发:前端和后台,利用 Ajax 进行交互, 但是框架却提出了一种开发模式:mvc 这 ...
- python 3 爬虫
import urllib.request url = "http://www.oschina.net/" data = urllib.request.urlopen(url).r ...
- 九:flask-response响应
1.如果返回的是个合法的响应对象,则直接返回 同时,也可以在response里面做一些操作,比如增加cookie 2.如果返回的是一个字符串,那么flask会重新创建一个werkzeug,wrappe ...