本文实例为大家分享了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>

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