想必大家在項目開發中難免會用到關鍵字篩選的功能，正好這次項目有需求要做這一塊，就整理一下vue的input輸入框輸入關鍵字檢索數據列表的代碼。下面直接上代碼：

html：

<!-- 篩選demo --><template> <div>  <input type="text" v-model="search">  <ul>   <!-- 注意！注意！注意！這里循環遍歷的是items，不再是data里的list數組 -->   <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) {    //不區分大小寫處理    var reg = new RegExp(_search, 'ig')    //es6 filter過濾匹配，有則返回當前，無則返回所有    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;  } },}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。