先看看效果

首先引入 <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}},價(jià)格:￥{{item.price}}</li></ul><div v-else>暫無數(shù)據(jù)</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;}} })

非常實(shí)用把，試一下哦

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。