如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
< charset="UTF-8">
< ></ >
</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>
< src="vue.js"></ >
< >
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 .keys(product).some(function(key) {
//搜索所有的内容
return String(product[key]).toLowerCase().indexOf(search) > -1;
//只搜索问题内容（某一个key）
return String(product['questions']).toLowerCase().indexOf(search)>-1;
})
})
return searchVal;
}
}
}
})
</ >
</body>
</html>
以上这篇vue2过滤器模糊查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
Redis专题（3）：锁的基本概念到Redis分布式锁实现
2026-05-18栏目： 教程
-
阿里技术专家详解DDD系列 第二弹 - 应用架构
2026-05-18栏目： 教程
-
阿里第一颗芯片问世，平头哥发布最强AI芯片含光800
2026-05-18栏目： 教程
-
一目了然 | 数据库实例性能调优利器：Performance Insights
2026-05-18栏目： 教程
-
云栖大会 | 阿里云招募各大技术领域开发者讨论学习
2026-05-18栏目： 教程