vue实现全匹配搜索列表内容

本文实例为大家分享了vue实现全匹配搜索列表内容的具体代码，供大家参考，具体内容如下

效果：

组件代码：

<template>
 <div>
 <!-- 搜索框加按钮 -->
<el-input placeholder=\"请搜索关键词\" prefix-icon=\"el-icon-search\" v-model=\"keyword\"></el-input>
<el-button class=\"searchbtn\" @click=\"search\">搜索</el-button>
<!-- 数据 -->
<ul>
 <li v-for=\"(item,index) in agentlisttwo\" :key=\"item.id\" >
   <p>{{item.userID}}</p>
   <p>{{item.agentnum}}</p>
   <p>{{item.username}}</p>
   <p>{{item.phone}}</p>
 </li>
</ul>
 </div>
</template>
 
 <script>
 
 export default {
  data() {
  return {
   keyword:\'\',//搜索关键词
   agentlisttwo:\'\',//搜索重定义数组
   agentlist: [{
    userID: \"1240\",
    agentnum: \"22\",
    username: \"张无忌\",
    phone: \"13112345678\",
   },{
    userID: \"1241\",
    agentnum: \"23\",
    username: \"林平之\",
    phone: \"13114785236\",
   },{
    userID: \"1242\",
    agentnum: \"24\",
    username: \"令狐冲\",
    phone: \"13196584589\",
   },{
    userID: \"1243\",
    agentnum: \"25\",
    username: \"独孤求败\",
    phone: \"13115963256\",
   },{
    userID: \"1244\",
    agentnum: \"26\",
    username: \"包租婆\",
    phone: \"13110254523\",
   },{
    userID: \"1245\",
    agentnum: \"27\",
    username: \"韦小宝\",
    phone: \"13187455236\",
   },{
    userID: \"1246\",
    agentnum: \"28\",
    username: \"小燕子\",
    phone: \"13174552223\",
   },{
    userID: \"1247\",
    agentnum: \"29\",
    username: \"花无期\",
    phone: \"13174586358\",
   }], 
  }
  },
 
  // 创建完成时
  created() {
   //重定义数组
   this.agentlisttwo = this.agentlist;
  },
 
  methods: {
 
   search(){
    //搜索
    var keyword = this.keyword;
    if (keyword) {
      this.agentlisttwo = this.agentlist.filter(function(agentlist) {
       return Object.keys(agentlist).some(function(key) {
        return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1
       })
      })
    }else{
     this.agentlisttwo = this.agentlist;
    }
   },
   
  },
 }
 
</script>
 
<style scoped>
p{
 width: 300px;
 height: 30px;
 line-height: 30px;
 border:1px solid black;
 text-align: center;
}
.p1{
 color: red;
}
</style>

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。