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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
react-native使用leanclound消息推送的方法
Aug 06 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
转PHP手册及PHP编程标准
2006/12/17 PHP
php 动态添加记录
2009/03/10 PHP
PHP XML数据解析代码
2010/05/26 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
php轻松实现文件上传功能
2016/03/03 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Django中的AutoField字段使用
2020/05/18 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
大三学习计划书范文
2014/05/02 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
小学教师年度个人总结
2015/02/05 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
获奖感言范文
2015/07/31 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Golang ort 中的sortInts 方法
2022/04/24 Golang