vue实现搜索功能的代码/实现搜索的程序

搜索

products：搜索查找的数据集合（数组数组中的对象元素）
search：是input标签输入的要搜索的内容

data() {return {search: "",searchData: "",products: [...this.record//假数据// { num:1, name: "数据1", date: "2018-01-04", scount:23,type:'商品'},// { num:1, name: "数据2", date: "2018-01-25", scount:23,type:'商品'},// { num:1, name: "数据3", date: "2018-02-10", scount:23,type:'商品'},// { num:1, name: "数据4", date: "2018-03-04", scount:23,type:'商品'},// { num:1, name: "数据5", date: "2018-05-24", scount:23,type:'商品'},// { num:1, name: "数据6", date: "2018-10-29", scount:23,type:'商品'},],}},

btn: function () {var search = this.search;if (search) {this.searchData = this.products.filter(function (product) {//return Object.keys(product).some(function (key) {//查找满足条件的项return String(product[key]).toLowerCase().indexOf(search) > -1;});});}this.$emit('searchdata',this.searchData)},},

vue实现搜索功能的代码/实现搜索的程序相关推荐

vue-codemirror基本用法：实现搜索功能、代码折叠功能、获取编辑器值及时验证
昨天实现了一些codemirror:基本的编辑代码功能.插入变量功能.codemirror语法验证功能.代码格式化(由于主要是json数据,所以暂时没引用其他组件,如果需要建议引用js-beautif ...
java安卓百度地图查找便利店_Android 百度地图POI搜索功能实例代码
在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这 ...
vue 移动端搜索功能（带历史搜索记录）
实现效果如图: 实现的功能: 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 html代码: <div class=&quo ...
闲云旅游项目开发-（第四篇：机票首页/机票搜索功能（`el-autocomplete`远程搜索组件）/moment.js的使用/日期选择组件el-date-picker）
目录相关组件介绍一机票首页布局二封装搜索组件 1. 组件布局 2.目标思路 3.步骤 3.1 基本功能 3.2 自动补全 3.3获取真正的推荐数据 3.4 添加城市代号 3.5 处理日期格式 ...
android搜索功能xml,Android_Android ActionBar搜索功能用法详解，本文实例讲述了Android ActionBar - phpStudy...
Android ActionBar搜索功能用法详解本文实例讲述了Android ActionBar搜索功能用法.分享给大家供大家参考,具体如下: 使用ActionBar SearchView时的注意 ...
android实现通知栏搜索功能,actionBar+SearchView实现搜索功能
在项目中有使用到ActionBar和SearchView,下面做一个总结以方便以后使用. 一.搜索控件:SearchView(SDK Version >=11) (一)比较重要的方法和属性: 1 ...
Android实现搜索功能并本地保存搜索历史记录
本案例实现起来很简单,所以可以直接拿来嵌入项目中使用,涉及到的知识点: - 数据库的增删改查操作 - ListView和ScrollView的嵌套冲突解决 - 监听软键盘回车按钮设置为搜索按钮 ...
Android简单实现搜索功能显示清除历史搜索记录
本文主要为大家分享了Android实现搜索功能,并且可以实时显示搜索的历史记录,根据输入的内容去模糊查询,供大家参考,界面图如下. 本案例实现起来也非常的简单,所以可以直接拿来嵌入项目中使用,主要涉及 ...
phpsotrm怎么搜索功能_Windows 10 网络搜索设计太反人类？教你如何彻底关闭它
来源:太平洋电脑网我们知道微软在Windows 10中,特别加强了系统的搜索功能,但Windows 10的搜索的确很难称得上好用.抛开效率低下.呈现结果少.造成系统卡顿等老生常谈的问题不论,在功能设 ...

vue实现搜索功能的代码/实现搜索的程序

搜索

vue实现搜索功能的代码/实现搜索的程序相关推荐

最新文章

热门文章