VUE非常實用的搜索過濾，喜歡點個贊哦
廢話不多說，先來看看效果
1 引入vue
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2 HTML
<div id="app"><input v-model='search' /><ul v-if="searchData.length > 0"><li v-for="item in searchData">{{item.name}},價格:￥{{item.price}}</li></ul><div v-else>暫無數據</div>
</div>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;}}
})
)
)
