vue2过滤器模糊查询方法

作者：seFei_Q 时间：2024-04-28 09:21:03　

如下所示：

<!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>

来源：https://blog.csdn.net/seFei_Q/article/details/78788102

标签：vue2,过滤器,查询

投稿

vue2过滤器模糊查询方法

猜你喜欢

避免重复写代码的小函数

使用PyCharm安装pytest及requests的问题

浅析python参数的知识点

举例讲解Python常用模块

pycharm 使用心得（三）Hello world！

python利用socketserver实现并发套接字功能

JavaScript控制台的更多功能

python算法与数据结构之单链表的实现代码

python 梯度法求解函数极值的实例

详解Numpy中的广播原则/机制

地图网站的需求功能与体验

win10系统配置GPU版本Pytorch的详细教程

用Oracle并行查询发挥多CPU的威力

js点击事件的执行过程实例分析【冒泡与捕获】

Python 获取当前路径3种方法

SQL Server错误代码大全及解释（留着备用）

Golang中Set类型的实现方法示例详解

python 删除excel表格重复行,数据预处理操作

Python 继承，重写，super()调用父类方法操作示例

python中的decorator的作用详解