vue2過濾器模糊查詢方法
更新時間：2018年09月16日 13:51:58 作者：seFei_Q
今天小編就為大家分享一篇vue2過濾器模糊查詢方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!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 = '';//搜索后的數(shù)據(jù)
if (search) {
searchVal = this.products.filter(function(product) {
return Object.keys(product).some(function(key) {
//搜索所有的內(nèi)容
return String(product[key]).toLowerCase().indexOf(search) > -1;
//只搜索問題內(nèi)容（某一個key）
return String(product['questions']).toLowerCase().indexOf(search)>-1;
})
})
return searchVal;
}
}
}
})
</script>
</body>
</html>
以上這篇vue2過濾器模糊查詢方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue-cli下ESlint 配置說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vant如何實現(xiàn)Collapse折疊面板標題自定義
這篇文章主要介紹了vant如何實現(xiàn)Collapse折疊面板標題自定義，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題
這篇文章主要介紹了Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue2.0 實現(xiàn)頁面導(dǎo)航提示引導(dǎo)的方法
下面小編就為大家分享一篇vue2.0 實現(xiàn)頁面導(dǎo)航提示引導(dǎo)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了Vue實現(xiàn)模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
在Vue中,路由攔截器主要用于在導(dǎo)航到某個路由前或者離開某個路由時進行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
解決antd 表單設(shè)置默認值initialValue后驗證失效的問題
這篇文章主要介紹了解決antd 表單設(shè)置默認值initialValue后驗證失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
下面小編就為大家分享一篇解決vue 路由變化頁面數(shù)據(jù)不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue 作為一款流行的前端框架,提供了多種方式來定義組件,包括單文件組件、渲染函數(shù)、、JSX/TSX 以及函數(shù)式組件、不同的方式適用于不同的場景,本文將對這四種方式進行詳細對比,幫助你找到最適合自己項目的方案,需要的朋友可以參考下2025-03-03