vue2过滤器模糊查询方法


Posted in Javascript onSeptember 16, 2018

如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<div id="app">
 <input type="text" v-model='search' />
 <ul v-for="item in searchData ">
  <li>{{item.name}},价格:¥{{item.price}}</li>
 </ul>
</div>
<script src="vue.js"></script>
<script>
 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: "汽车"
   }, {
    name: '火龙果',
    price: 25,
    category: "工具"
   }]
  },
  
 computed: {
   searchData: function() {
    var search = this.search;
		var searchVal = '';//搜索后的数据
    if (search) {
     searchVal = this.products.filter(function(product) {
      return Object.keys(product).some(function(key) {
			//搜索所有的内容
       return String(product[key]).toLowerCase().indexOf(search) > -1;
			//只搜索问题内容(某一个key)
			 return String(product['questions']).toLowerCase().indexOf(search)>-1;
      })
     })
		return searchVal;
    }
   }
  }
 
 })
</script>
</body>
</html>

以上这篇vue2过滤器模糊查询方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
webpack的CSS加载器的使用
Sep 11 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 #Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 #Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 #Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 #Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 #Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 #Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 #Javascript
You might like
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
详解vue axios二次封装
2018/07/22 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
工程概预算专业毕业生求职信
2013/10/04 职场文书
就职演讲稿范文
2014/05/19 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年招生工作总结
2014/11/26 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
催款函范本大全
2015/06/24 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技