vue2过滤器模糊查询方法

如下所示：

<!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过滤器模糊查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue2.0系列之过滤器的使用

    Vue2.0系列之过滤器的使用

    vue2.0已经废弃了过滤器,需要自定义过滤器,用于一些常见的文本格式化. 感觉超级好用!! 过滤器可以用在两个地方:双花括号插值 和 v-bind表达式. 过滤器应该被添加在JavaScript表达式的尾部,由管道符指示. 一.注册全局过滤器 注意事项: 1.全局方法Vue.filter()注册一个自定义过滤器,必须放在vue实例化前面 2.过滤器函数始终以表达式的值作为第一个参数,带引号的参数视为字符串,而不带引号的参数按表达式计算 3.可以设置两个过滤器参数,前提这两个过滤器处理的不冲突

  • 详解Vue2.0里过滤器容易踩到的坑

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); }); function里第一个参数value默认为使用这个过滤器的data对象内的值,在本例中是msg的值'you are mine'. 坑1:第一个参数必须为自身的值,后面可

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

  • vue input输入框模糊查询的示例代码

    vue input输入框模糊查询的示例代码

    Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo

  • 详解VUE2.X过滤器的使用方法

    详解VUE2.X过滤器的使用方法

    VUE2.X过滤器的使用方法有几种,今天讲一种,以cnode社区API为示例,转换tab类型为中文汉字. 首先我们在assets文件夹中新建个js的文件夹,并新建common.js,然后将过滤器写在这个文件中.当然你也可以写在单个组件中,这个等下后面说. /** * 将tab类型转换成汉字 * @param {String} tab 待转换前的tab值 * @return {String} 转换后的tab中文 */ export function change (tab) { switch (t

  • vue2过滤器模糊查询方法

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model='search' /> &

  • mysql中使用instr进行模糊查询方法介绍

    在mysql中使用内部函数instr,可代替传统的like方式查询,并且速度更快. instr 函数,第一个参数是字段,第二个参数是要查询的串,返回串的位置,第一个是1,如果没找到就是0. 例如,查询字段name中带"军"的名字,传统的方法是: select name from 用户表 where name like `%军%'; 用instr的方法: select name from 用户表 where instr('name','军'); 或: select name from 用

  • Java模糊查询方法详解

    当我们需要开发一个方法用来查询数据库的时候,往往会遇到这样一个问题:就是不知道用户到底会输入什么条件,那么怎么样处理sql语句才能让我们开发的方法不管接受到什么样的条件都可以正常工作呢?这时where '1'='1'加上list就可以完美解决这个问题了,废话少说,上代码: // 模糊查询方法 public List<person> query() { List<person> list = new ArrayList<>(); Connection con = null

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • 基于input动态模糊查询的实现方法

    最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法.就分享一下目前遇到的坑和可以实现动态查询的几种方式. 1.jQuery的change()方法. 这个方法要失去所在的input框的焦点时,事件才会被触发,感觉有点鸡肋,也有可能是我没有完全会熟用这个方法,希望懂的大神可以分享一下使用秘籍. <input type="text" id="n3"/> var $n3=$("#n3)

  • java实现的连接数据库及模糊查询功能示例

    java实现的连接数据库及模糊查询功能示例

    本文实例讲述了java实现的连接数据库及模糊查询功能.分享给大家供大家参考,具体如下: 模糊查询是比较常见的一种查询方式,例如在订单表中,包含有订单的具体日期.如果要查询某年某月的订单信息,最好的方式就是使用模糊查询.进行模糊查询需要使用关键字LIKE.在使用LIKE关键字进行模糊查询时,可以使用通配符"%",来代替0个或者多个字符,使用下划线_来代表一个字符. 注释:需要注意的是在使用LIKE的时候,后面的查询条件需要加 '  ',英文状态下的单引号引起来,不然报错如下 You ha

  • MyBatis-plus 模糊查询的使用

    在使用MyBatis-plus的时候,一些基础的增删改查可以不用再自己写sql了: public interface UserDao extends BaseMapper<FykUser>{ } 就这样,就可以实现user表的增删改查了. 模糊查询 使用userDao.selectList(queryWrapper)方法,就可以查询出一个用户列表. 如果需要模糊查询,代码如下: //条件封装 QueryWrapper<FykUser> queryWrapper = new Quer

  • MySQL模糊查询用法大全(正则、通配符、内置函数)

    MySQL模糊查询用法大全(正则、通配符、内置函数)

    SELECT * from table where username like '%陈哈哈%' and hobby like '%牛逼' 这是一条我们在MySQL中常用到的模糊查询方法,通过通配符%来进行匹配,其实,这只是冰山一角,在MySQL中,支持模糊匹配的方法有很多,且各有各的优点.好了,今天让我带大家一起掀起MySQL的小裙子,看一看模糊查询下面还藏着多少鲜为人知的好东西. 一.MySQL通配符模糊查询(%,_) 1-1. 通配符的分类 "%" 百分号通配符: 表示任何字符出现

  • vue和js中实现模糊查询方式

    vue和js中实现模糊查询方式

    目录 vue和js实现模糊查询 如何实现? 方法1 方法2 方法3 正则表达式实现模糊查询 vue和js实现模糊查询 先来看效果图 这种数据量少的场景适用于前端实现模糊查询 如何实现? <template> <div class="container"> <div class="search-bar"> <el-input v-model="inputVal" placeholder="请输入图

  • Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    Angular实现的内置过滤器orderBy排序与模糊查询功能示例

    本文实例讲述了Angular实现的内置过滤器orderBy排序与模糊查询功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular模糊查询.排序</title> <style> *{ ma

随机推荐