组件代码：
<template> <div> <!-- 搜索框加按钮 --> <el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword"></el-input> <el-button @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>