html 搜索过滤器,VUE-搜索过滤器

VUE非常实用的搜索过滤，喜欢点个赞哦

废话不多说，先来看看效果

1 引入vue

2 HTML

• {{item.name}},价格:￥{{item.price}}

暂无数据

3 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: "汽车"

}]

},

computed: {

searchData: function() {

var search = this.search;

if (search) {

return this.products.filter(function(product) {

return Object.keys(product).some(function(key) {

return String(product[key]).toLowerCase().indexOf(search) > -1

})

})

}

return this.products;

}

}

})