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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python写日志封装类实例
2015/06/28 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python中kmeans聚类实现代码
2018/02/23 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
PyQt实现计数器的方法示例
2021/01/18 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
大学学年自我鉴定
2013/10/28 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
公务员考察材料
2014/12/23 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python