首页 > 语言 > JavaScript > 正文

vue2过滤器模糊查询方法

2024-05-06 15:29:54
字体:
来源:转载
供稿:网友

如下所示:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选