先看看效果

首先引入 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

?

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> 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;}} })

非常實用把，試一下哦

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的VUE-搜索过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。