这篇文章主要介绍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>以上是“vue如何实现全匹配搜索列表内容”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
