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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 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
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python的多维空数组赋值方法
2018/04/13 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python3 集合set入门基础
2020/02/10 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
学生档案自我鉴定
2013/10/07 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
音乐节策划方案
2014/06/09 职场文书
森林防火宣传标语
2014/06/27 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
Linux安装apache服务器的配置过程
2021/11/27 Servers