vue实现全匹配搜索列表内容


Posted in Javascript onSeptember 26, 2019

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

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js获取class的所有元素
Mar 28 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
layui 上传图片 返回图片地址的方法
Sep 26 #Javascript
vue仿ios列表左划删除
Sep 26 #Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 #Javascript
You might like
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php session安全问题分析
2011/06/24 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python如何发布程序的详细教程
2018/10/09 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
易程科技软件测试笔试
2013/03/24 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
工作疏忽检讨书
2014/01/25 职场文书
学校安全教育制度
2014/01/31 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
兴趣班停课通知
2015/04/24 职场文书
德能勤绩工作总结
2015/08/11 职场文书