vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示

更新時(shí)間：2020年10月26日 13:26:55 作者：木子Leo

這篇文章主要為大家詳細(xì)介紹了vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

想必大家在項(xiàng)目開發(fā)中難免會(huì)用到關(guān)鍵字篩選的功能，正好這次項(xiàng)目有需求要做這一塊，就整理一下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>

匹配（所有||單個(gè)）字段 > 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);
   })
   //匹配某個(gè)字段
   // return e.name.match(reg);
  })
  };
  return this.list;
 }
 },
}

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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