vue实现全匹配搜索列表内容
时间:2019-09-26
本文章向大家介绍vue实现全匹配搜索列表内容,主要包括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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 使用swagger作为restful api的doc文档生成
- 面试机器学习、大数据岗位时遇到的各种问题
- 使用nginx代理跨域,使用nginx代理bing的每日一图
- Java Web基础入门
- Java中Optional使用注意事项
- 使用awk来解析dump文件 (73天)
- IntelIj IDEA运行JUnit Test OutOfMemoryError
- git pull fails “unable to resolve reference” “unable to update local ref”
- 使用dropwizard(5)--加入swagger
- 使用hint来调优sql语句(72天)
- 用R语言对城管事件数据分析
- 使用dropwizard(4)-加入测试-jacoco代码覆盖率
- goldengate学习-安装篇(71天)
- 使用dropwizard(6)-国际化-easy-i18n
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 百万并发「零拷贝」技术系列之Java实现
- 腾讯云LiteAV、IM SDK(iOS)
- 在 Docker 中生成 ProtoBuffer、gRPC 文件
- Golang MongoDB Driver 更新符合条件的数组元素的字段
- 638. 大礼包 Krains 2020-08-01 19:48:29 动态规划DFS
- 650. 只有两个键的键盘 Krains 2020-08-02 09:39:39 动态规划DFS
- 类加载子系统 Krains 2020-07-31
- 理解类装载器
- MySQL-Python:使用技巧
- 使用Pytorch和Matplotlib可视化卷积神经网络的特征
- 微软复活20年前生产力工具PowerToys,填补Wind10缺失功能,开源且免费
- 运行时数据区 Krains 2020-08-01
- Docker 之容器间通信配置
- leetcode199场周赛
- 浅谈MySQL中的锁