欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)教程》

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

相關(guān)文章

最新評(píng)論