介绍 & lt; template>
,& lt; div>
,& lt; !——,搜索框加按钮,——比;
& lt; el-input 占位符=扒胨阉鞴丶省?prefix-icon=癳l-icon-search", v模型=発eyword"祝辞& lt;/el-input>
& lt; el-button 类=皊earchbtn", @click=皊earch"在搜索& lt;/el-button>
& lt; !——,数据,——比;
& lt; ul>
,& lt; li v=?项目、索引),拷贝agentlisttwo",:关键=癷tem.id",在
,,& lt; p> {{item.userID}} & lt;/p>
,,& lt; p> {{item.agentnum}} & lt;/p>
,,& lt; p> {{item.username}} & lt;/p>
,,& lt; p> {{item.phone}} & lt;/p>
,& lt;/li>
& lt;/ul>
,& lt;/div>
& lt;/template>
,
,& lt; script>
,
,export default {
数据才能(),{
return {才能
,,关键字:& # 39;& # 39;//搜索关键词
,,agentlisttwo: & # 39; & # 39;//搜索重定义数组
,,,agentlist: [{
,,,用户标识:,“1240”,
,,,agentnum:,“22”,
,,,用户名:,“张无忌”,
,,,电话:,“13112345678”,
,,},{
,,,用户标识:,“1241”,
,,,agentnum:,“23”,
,,,用户名:,“林平之“,
,,,电话:,“13114785236”,
,,},{
,,,用户标识:,“1242”,
,,,agentnum:,“24“,
,,,用户名:,“令狐冲“,
,,,电话:,“13196584589”,
,,},{
,,,用户标识:,“1243”,
,,,agentnum:,“25”,
,,,用户名:,“独孤求败“,
,,,电话:,“13115963256”,
,,},{
,,,用户标识:,“1244”,
,,,agentnum:,“26”,
,,,用户名:,“包租婆“,
,,,电话:,“13110254523”,
,,},{
,,,用户标识:,“1245”,
,,,agentnum:,“27”,
,,,用户名:,“韦小宝“,
,,,电话:,“13187455236”,
,,},{
,,,用户标识:,“1246”,
,,,agentnum:,“28“,
,,,用户名:,“小燕子“,
,,,电话:,“13174552223”,
,,},{
,,,用户标识:,“1247”,
,,,agentnum:,“29”,
,,,用户名:,“花无期“,
,,,电话:,“13174586358”,
,,},,
,,}
,,},
,//,才能创建完成时
()创建的才能,{
,,//重定义数组
,,this.agentlisttwo =, this.agentlist;
,,},
,
方法:才能,{
,
,,search () {
,,,//搜索
,,,var keyword =, this.keyword;
,,,if (关键字),{
,,,,,this.agentlisttwo =, this.agentlist.filter(函数(agentlist), {
,,,,,,return 种(agentlist)。(函数(关键),{
,,,,,,,return 字符串(agentlist[主要]).toLowerCase () .indexOf(关键字),在1
,,,,,,})
,,,,,})
还有,,,}{
,,,,this.agentlisttwo =, this.agentlist;
,,,}
,,},
,,
,,},
,}
,
& lt;/script>
,
& lt; style scoped>
p {
,宽度:300 px;
,高度:30 px;
,行高:30 px;
,边界:1 px solid 黑色;
,text-align:中心;
}
.p1 {
,颜色:红色;
}
& lt;/style>
这篇文章主要介绍vue如何实现全匹配搜索列表内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
vue实现全匹配搜索列表内容的具体代码如下
效果:
组件代码:
以上是“vue如何实现全匹配搜索列表内容”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
