溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下所示：
<!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過濾器模糊查詢方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
