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組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue打開其他項目頁面并傳入數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
async和await作為異步函數(shù),語法很簡單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下2022-10-10
利用vue組件自定義v-model實(shí)現(xiàn)一個Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實(shí)現(xiàn)一個Tab組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了vue項目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
VUE3+vite項目中動態(tài)引入組件與異步組件的詳細(xì)實(shí)例
在做vue3項目中時,每次使用都需要先進(jìn)行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項目中動態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06
vue實(shí)現(xiàn)鼠標(biāo)滑動展示tab欄切換
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動展示tab欄切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
關(guān)于Vue?監(jiān)控數(shù)組的問題
這篇文章主要介紹了Vue?監(jiān)控數(shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化，Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測到，對vue監(jiān)控數(shù)組知識是面試比較常見的問題，感興趣的朋友一起看看吧2022-05-05