vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
更新時間：2020年10月26日 13:26:55 作者：木子Leo
這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
想必大家在項目開發(fā)中難免會用到關(guān)鍵字篩選的功能，正好這次項目有需求要做這一塊，就整理一下vue的input輸入框輸入關(guān)鍵字檢索數(shù)據(jù)列表的代碼。下面直接上代碼：
html：
<!-- 篩選demo -->
<template>
<div>
<input type="text" v-model="search">
<ul>
<!-- 注意！注意！注意！這里循環(huán)遍歷的是items，不再是data里的list數(shù)組 -->
<li v-for="(item,index) in items">
<span>{{item.name}}</span>
<span>{{item.msg}}</span>
</li>
</ul>
</div>
</template>
匹配（所有||單個）字段 > js：
export default {
data () {
return {
search:'',
list:[
{name:'AAA',msg:'aaa文本介紹1'},
{name:'BBB',msg:'bbb文本介紹2'},
{name:'CCC',msg:'ccc文本介紹3'},
{name:'DDD',msg:'ddd文本介紹4'},
{name:'EEE',msg:'eee文本介紹5'},
]
}
},
computed: {
//過濾方法
items: function() {
var _search = this.search;
if (_search) {
//不區(qū)分大小寫處理
var reg = new RegExp(_search, 'ig')
//es6 filter過濾匹配，有則返回當(dāng)前，無則返回所有
return this.list.filter(function(e) {
//匹配所有字段
return Object.keys(e).some(function(key) {
return e[key].match(reg);
})
//匹配某個字段
// return e.name.match(reg);
})
};
return this.list;
}
},
}
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue3中使用el-tree-select實現(xiàn)樹形下拉選擇器效果
el-tree-select是一個含有下拉菜單的樹形選擇器,結(jié)合了?el-tree?和?el-select?兩個組件的功能,這篇文章主要介紹了在vue3中使用el-tree-select做一個樹形下拉選擇器,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue在啟動時卡住了,啟動不了的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項目的實例內(nèi)容以及知識點講解，需要的朋友們參考下。2019-07-07
這篇文章主要介紹了vue過濾器實現(xiàn)日期格式化的案例分析，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過兩個例子，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
vue.js將時間戳轉(zhuǎn)化為日期格式的實現(xiàn)代碼
這篇文章主要介紹了vue.js將時間戳轉(zhuǎn)化為日期格式的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled(實例代碼)
本文通過實例代碼給大家分享了vue動態(tài)循環(huán)出的多個select出現(xiàn)過的變?yōu)閐isabled效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-11-11
vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)
在一個項目中需要對element-ui的table組件進(jìn)行一些樣式的修改,其中就包括對hover效果的處理,下面這篇文章主要給大家介紹了關(guān)于element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了vue3封裝echarts組件最佳形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11