vue实现全匹配搜索列表内容
更新时间:2019年09月26日 15:54:08 作者:小羽向前跑
这篇文章主要为大家详细介绍了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项目使用Websocket大文件FileReader()切片上传实例
这篇文章主要介绍了Vue项目使用Websocket大文件FileReader()切片上传实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10Vue 如何使用props、emit实现自定义双向绑定的实现
这篇文章主要介绍了Vue 如何使用props、emit实现自定义双向绑定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-06vue使用v-if v-show页面闪烁,div闪现的解决方法
在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果。怎么处理这样的问题呢,下面小编给大家带来了vue使用v-if v-show页面闪烁,div闪现的解决方法,一起看看吧2018-10-10
最新评论