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 操作Word和Excel的实现代码
Oct 26 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
php跨域调用json的例子
Nov 13 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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中防止SQL注入方法详解
2014/12/25 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
学习JavaScript鼠标响应事件
2015/12/25 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
jquery实现左右轮播切换效果
2018/01/01 jQuery
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
python处理excel绘制雷达图
2019/10/18 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
PyTorch安装与基本使用详解
2020/08/31 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
致400米运动员广播稿
2014/02/07 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP