VUE-搜索过滤器

VUE非常实用的搜索过滤,喜欢点个赞哦

废话不多说,先来看看效果

clipboard.png

1 引入vue

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2 HTML

<div id="app"><input v-model='search' /><ul v-if="searchData.length > 0"><li v-for="item in searchData">{{item.name}},价格:¥{{item.price}}</li></ul><div v-else>暂无数据</div>
</div>

3 JS

var vm = new Vue({el: '#app',data: {search: '',products: [{name: '苹果',price: 25,category: "水果"}, {name: '香蕉',price: 15,category: "水果"}, {name: '雪梨',price: 65,category: "水果"}, {name: '宝马',price: 2500,category: "汽车"}, {name: '奔驰',price: 10025,category: "汽车"}, {name: '柑橘',price: 15,category: "水果"}, {name: '奥迪',price: 25,category: "汽车"}]},computed: {searchData: function() {var search = this.search;if (search) {return this.products.filter(function(product) {return Object.keys(product).some(function(key) {return String(product[key]).toLowerCase().indexOf(search) > -1})})}return this.products;}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

单选按钮必填会有红色选中提示吗_为什么单选按钮和复选框不能共存?

以下内容由摹客团队翻译整理&#xff0c;仅供学习交流&#xff0c;摹客设计协作一站式云平台&#xff0c;从产品、设计到开发&#xff0c;摹客来解决。单选按钮和复选框长期以来一直都是容易导致用户困惑的组件。这两个组件通常用于相同的情景下&#xff0c;但看起来又完全不同…

用计算机进行服装设计,电脑服装设计(10制版1班)

《电脑服装设计》课程教学大纲课程名称:电脑服装设计(Corldraw和Photoshop)课程代码:10617313总学时&#xff1a;68课时适用专业&#xff1a;10制版方向学生开课单位&#xff1a;时装设计学院一、讲课内容第一章 CORELDROW软件整体的介绍第一节绪论, 与其他图形绘制软件的区别及…

程序包org.junit.jupiter.api不存在

在跑项目的时候遇到这个问题&#xff0c;去看pom文件一切正常&#xff0c;也引入了这个依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13.2</version> <scope>test</scope&…

thrift介绍及应用(一)—介绍

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12157151 ------------------------------------------------------------------------------------ 一、概述 Thrift是Apache下的一个子项目&#xff0c;最早是Facebook的项目&#xff0c;后来Facebook提供给Apa…

matlab双目相机标定校正_基于双目视觉的无人机避障算法(一)

讲述在10月到12月所做的所有工作对于一个无人机自主避障来说&#xff0c;存在着以下流程&#xff1a;感知&#xff1a;障碍物检测、行人检测、目标检测SLAM&#xff1a;为无人机提供位置估计&#xff0c;构建稀疏环境地图路径规划&#xff1a;规划一条从当前位置到目标位置的移…

计算机无法播放,如果无法播放计算机mp4文件怎么办?

FireStar365接受1. 下载并安装最新版本的视频播放器(例如: Storm Video).2. 在硬盘中找到MP4视频文件.3. 右键单击该文件&#xff0c;然后选择打开方法“ Storm Video”.4. 可以双击打开页面.zxc942128835将mp4链接到计算机&#xff0c;打开磁盘&#xff0c;单击菜单栏上的工具…

thrift介绍及应用(二)—简单应用

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12162131 ----------------------------------------------------------------------------------- 【接上文“thrift介绍及应用&#xff08;一&#xff09;—介绍”】 六、一个最简单的实例 Thrift文件&#xf…

打游戏的教育意义

夜色已深&#xff0c;一个男孩子还在打游戏。门忽然开了&#xff0c;妈妈走了进来&#xff0c;她把一碗阳春面摆在桌子上。说&#xff1a;"歇息一会儿&#xff0c;趁热把这碗面吃了吧。"孩子嗯了一声&#xff0c;眼睛没有离开屏幕。妈妈生怕打搅孩子&#xff0c;悄悄…

python快速编程入门课本第六章_python编程快速上手第六章实践项目参考code

代码如下&#xff1a; 题目的意思是通过一个函数将列表的列表显示在组织良好的表格中&#xff0c;每列右对齐 tableData [[apples, oranges, cherries, banana], [Alice, Bob, Carol, David], [dogs, cats, moose, goose]]apples Alice dogs oranges Bob cats cherries Carol …

计算机硬件配置组件,配置vcenter server的硬件(默认指windows版本的)

一般来说vcenter的硬件需求与它管理的主机和VM有直接关系1. vcenter server的最低硬件配置Two 64-bit CPUs or a single dual-core 64-bit CPU.2 GHz processor or faster.4 GB of RAM or more.4 GB of free disk space.A network adapter (Gigabit Ethernet strongly recommen…

标准评分卡分数计算原理_评分卡的形式、刻度及应用场景

&#xfeff; 看到有伙伴提问&#xff1a;①我们的评分卡做好后&#xff0c;后续的使用策略是什么呀&#xff0c;都有哪些方向&#xff1f; ②评分卡分数切割点如何定&#xff0c;制定的业务逻辑是什么&#xff1f;其实&#xff0c;这个问题不好回答&#xff0c;也好回答。一方…

hexeditor 复制二进制值_MySQL复制全解析 Part 6 MySQL GTID 生命周期

实验环境此次实验的环境如下MySQL 5.7.25Redhat 6.10操作系统账号:mysql数据库复制账号:repl复制格式:基于行的复制通过前面的介绍我们知道MySQL的复制有两种方法基于二进制日志文件位置基于GTID上一节的内容为GTID的格式和存储&#xff0c;这节根据官方文档我们说GTID的生命周…

Thrift介绍与应用(三)—hbase的thrift接口

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12163047 ----------------------------------------------------------------------------------- 一、概述 Hbase是目前比较火的列存储数据库&#xff0c;由于Hbase是用Java写的&#xff0c;因此它原生地提供了…

Linux/Unix 新手和专家教程

你正在找一些高质量的Linux 和 UNIX 的教程吗&#xff1f;如果是&#xff0c;这篇文章会告诉你到哪去找到这些教程。这里我们将给出超过30个相当的不错的 Linux 和 UNIX 在线的教程。 需要大家注意的是&#xff0c;他们都是英文的&#xff0c;也许有一些也经被翻译到了中文社区…

自动ip的计算机共享打印,局域网内自动获取ip地址怎么设置打印机共享文件夹...

在局域网环境中,为了尽可能地节省办公成本,很多用户都会选择在局域网中架设、部署共享打印机,以便在单位的任何角落处都能方便、自如地进行打印操作。下面是学习啦小编为大家整理的关于局域网内自动获取ip地址怎么设置打印机共享文件夹&#xff0c;一起来看看吧!局域网内自动获…

高级数据分析1代码_用Python进行数据分析,让你一看就会

本书详细介绍利用Python进行操作、处理、清洗和规整数据等方面的具体细节和基本要点。虽然本书的标题是“数据分析”&#xff0c;重点却是Python编程、库&#xff0c;以及用于数据分析的工具。第1章 准备工作第2章 Python语法基础&#xff0c;IPython和Jupyter Notebooks第3章 …

工期日历天计算器_天津实地告诉你:房建项目是怎样保节点,抢工期的?

工程概况天津实地蔷薇花园住宅地块项目共计由24栋单体住宅、2栋配建及地下人防车库组成&#xff0c;其中12层小高层4栋、13层小高层1栋、19栋7层洋房。总建建筑面积为139348.62㎡&#xff0c;地上99348㎡&#xff0c;地下40000㎡&#xff0c;人防面积为14236㎡。工期目标项目施…

thrift介绍及应用(四)—hadoop的thrift接口

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12163519 ----------------------------------------------------------------------------------- 一、概述 hadoop是目前使用比较多的分布式文件系统&#xff0c;由于hadoop是用Java写的&#xff0c;对非Java程…

迟到的年度总结,我们应该收放自如

现在已经2018年3月了&#xff0c;这篇2017的年度总结显得晚了一点&#xff0c;但意义非凡&#xff0c;让我有了更多的反省和思考&#xff0c;我相信大家读完一定会有收获。好了&#xff0c;废话不多说进入主题。别用学习来逃避成长这话说的简直是屁话&#xff0c;不是学习才会成…

测试fps游戏反应速度软件,FPS反应速度提速

静谧无声&#xff0c;生死一瞬&#xff0c;说的就是FPS游戏&#xff0c;没有哪一个种类的游戏可以比拟我们FPS玩家对于反应速度的追求&#xff0c;更快更准哪怕提速只是1毫秒&#xff0c;无数高手之所以为高手就是因为他们可以打出我们看起来不可能完成的击杀&#xff0c;特别是…