vue2过滤器模糊查询方法
程序员文章站
2022-04-01 08:40:51
如下所示：
如下所示：
<!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过滤器模糊查询方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： 关于vue编译版本引入的问题的解决
下一篇： Java实现线性表的顺序存储