Vue前端页面关键词快速搜索方法

1、要达到的效果

通过在搜索框里输入关键词，搜索到相对应title的订单，如下。

2、html:

<el-inputstyle="width: 350px;height:30px;padding-bottom:6px;"@input="searchFun"placeholder="快速搜索拼单"prefix-icon="el-icon-search"v-model="searchVal">
</el-input>

3、script

export default {data () {return {List: [],token:'',searchVal:'', searchList:''}},methods: {searchFun(){if(this.searchVal===''){   //如果搜索栏为空就执行getList方法获取最初始的列表this.getList();}else{//搜索let list=this.List.filter(item=>item.title.toString().indexOf(this.searchVal)>=0);this.List=list;}},//页面加载时获取订单  getList() {this.$axios({method: 'get',url: '/demo/job-order/',headers: {'Content-Type': "application/json;charset=UTF-8",'Authorization': 'Bearer ' + this.token,}}).then(res=>{                    //请求成功后执行函数if(res.data.code === 0){//定义从后端获取的listvar res = res.data.datathis.List = res console.log("获取拼单成功")}else{console.log("获取拼单失败")}}).catch(err=>{                   //请求错误后执行函console.log("请求错误")})}},created(){this.token =  localStorage.getItem('token')},mounted: function () {this.getList();},
}

4、核心代码

searchFun(){if(this.searchVal===''){   //如果搜索栏为空就执行getList方法获取最初始的列表this.getList();}else{//搜索let list=this.List.filter(item=>item.title.toString().indexOf(this.searchVal)>=0);this.List=list;}},

其实最核心的应该是let list=this.List.filter(item=>item.title.toString().indexOf(this.searchVal)>=0);这行，表示获取serachVal的值并转化为字符串再去遍历list数组。

Vue前端页面关键词快速搜索方法相关推荐

搜索引擎优化，SEO关键词快速排名方法有哪些？
搜索引擎SEO是企业宣传中常用的营销方式,凭借巨大的用户流量.精准的搜索需求.快速的信息收录等特点,得到了企业的信赖.而对于一些传统行业及初步创业阶段的企业,往往面临着无从下手的窘境.究竟如何在百度上 ...
SEO优化关键词快速排名方法
想要做到SEO优化关键词快速排名得了解搜索引擎优化原理才行,只有这样我们才能在短时间内大批量的把精准的长尾关键词做到百度首页. SEO优化关键词快速排名 1.搜索引擎喜欢静态页面,所以在做网站页面最好 ...
通过URL在前端页面传参的方法
通过URL在前端页面传参的方法整个过程实例在HTML页面a.html中:参数写入URL function detail(goods_id){window.location.href="h ...
html-javascript前端页面刷新重载的方法汇总
记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...
前端页面模拟浏览器搜索功能Ctrl+F实现
文章目录注 <html> <head><style type="text/css">.res{color: Red;}.result{back ...
Vue前端页面跳转，登录成功跳转页面
在以往不用框架的时候,我通常是通过href,或者重定向进行跳转. 对于vue,他有专门的router路由进行跳转. 所以第一步,我们要像python一样,在npm中安装并且在项目中引用他思路: 用户 ...
LiveNVR安防摄像头Web无插件直播平台页面的快速集成方法
Onvif/RTSP流媒体服务适合局域网络监控,将摄像机的rtsp流拉转分发,搭建试用入口演示地址 http://nvr.liveqing.com 关闭接口鉴权允许游客访问默认的接口鉴权是开启 ...
vue前端页面转PDF
需求说明公司最近想出一份报告,报告内容包含地图展示,折线图还有各种文字说明,跟后台沟通反映后台无法实现,所以就前端想办法来实现此功能. 所用插件 html2canvas jspdf html &am ...
Vue 前端页面按钮权限控制
前言按钮权限控制的功能其实在前面的一篇的页面权限管理也包含有这个功能,但是没有凸显出来,所以现在单独写一篇文章用来记录一下一.什么是按钮权限控制? 刚刚做完了一个后台管理系统,有用到按钮权限控制, ...
vue前端页面自适应解决方案
目录 1.用百分比 2.用rem .resize 3.媒体查询语句 4.flex布局 1.用百分比 <template><div class="box">& ...

Vue前端页面关键词快速搜索方法

Vue前端页面关键词快速搜索方法

Vue前端页面关键词快速搜索方法相关推荐

最新文章

热门文章