1. <template>
  2. <div>
  3. <h3>搜索列表</h3>
  4. <input type="text" placeholder="请输入要搜索的名字" v-model="searchName">
  5. <ul>
  6. <li v-for="(person,index) in fileterPersons" :key="personsKeys[index]">
  7. {{personsKeys[index]}}--
  8. {{person.name}}--
  9. {{person.age}}--
  10. {{person.sex}}--
  11.  
  12. </li>
  13. </ul>
  14.  
  15. </div>
  16. </template>
  17. <script>
  18. import shortid from 'shortid'
  19. export default{
  20. name:"list",
  21. data(){
  22. return {
  23. searchName:'',
  24. persons:[
  25. {name:'张三',age:18,sex:'男'},
  26. {name:'李四2',age:128,sex:'男'},
  27. {name:'王五',age:138,sex:'男'},
  28. {name:'赵六',age:148,sex:'男'},
  29. {name:'田七',age:158,sex:'男'},
  30. {name:'邢八',age:168,sex:'男'},
  31. {name:'高久',age:178,sex:'男'},
  32.  
  33. ],
  34. personsKeys:[],
  35. }
  36. },
  37. //生命周期方法
  38. mounted(){
  39. this.personsKeys=this.persons.map(v=>shortid.generate())
  40. },
  41. computed:{
  42. //过滤
  43. fileterPersons(){
  44. //1获取数据
  45. let {searchName,persons}=this;
  46. //2取出数组中的数据
  47. let arr=[...persons];
  48. //3.过滤数组
  49. if(searchName.trim()){
  50. arr=persons.filter((p)=>(p.name.indexOf(searchName)!==-1));
  51. }
  52. return arr;
  53. }
  54. }
  55. }
  56. </script>
  57. <style scoped>
  58.  
  59. ul{
  60. list-style: none;
  61. }
  62. ul li{
  63. padding:3px 0;
  64. }
  65. </style>

  

思路:

1.要知道使用计算属性来进行操作,computed

vue-通过name进行数据过滤的更多相关文章

  1. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  2. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  3. ABP框架 - 数据过滤

    文档目录 本节内容: 简介 预定义过滤 ISoftDelete 何时可用? IMustHaveTenant 何时可用? IMayHaveTenant 何时可用? 禁用过滤 关于using声明 关于多租 ...

  4. C#实现通用数据过滤窗体

    最近一直在做WINFORM项目,所以经常有些新的想法或尝试与大家分享,之前与大家分享了通用窗体遮罩层.通用可附加数据绑定的DataGridView.窗体渐显,今天来分享一个大家在其它软件中常见的功能: ...

  5. php数据过滤函数与方法示例【转载】

    1.php提交数据过滤的基本原则 1)提交变量进数据库时,我们必须使用addslashes()进行过滤,像我们的注入问题,一个addslashes()也就搞定了.其实在涉及到变量取值时,intval( ...

  6. PHP数据过滤

    1.php提交数据过滤的基本原则  1)提交变量进数据库时,我们必须使用addslashes()进行过滤,像我们的注入问题,一个addslashes()也就搞定了.其实在涉及到变量取值时,intval ...

  7. SQL学习之高级数据过滤

    一.高级数据过滤之IN操作符 IN 操作符用来指定条件范围,范围中的每个条件都可以进行匹配.IN取一组由逗号分隔.括在圆括号中的合法值.代码如下: select ItemId,ItemName,Che ...

  8. FastReport 数据过滤

    FastReport 数据过滤 在DataBind 的 OnBeforePrint 设置条件   例:显示 大于0 的数据 procedure MasterData1OnBeforePrint(Sen ...

  9. .NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤

    转:http://www.cnblogs.com/jaxu/archive/2011/08/04/2127365.html 我们见过Excel中的数据过滤功能,可以通过点击表头上的下拉列表来实现数据的 ...

  10. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

随机推荐

  1. js--标签语法的使用

    前言 在日常开发中我们经常使用到递归.break.continue.return等语句改变程序运行的位置,其实,在 JavaScript 中还提供了标签语句,用于标记指定的代码块,便于跳转到指定的位置 ...

  2. ReentrantLock可重入锁、公平锁非公平锁区别与实现原理

    ReentrantLock是lock接口的一个实现类,里面实现了可重入锁和公平锁非公平锁 ReentrantLock公平锁和不公平锁实现原理 公平锁会获取锁时会判断阻塞队列里是否有线程再等待,若有获取 ...

  3. iOS平台 | 快速集成华为AGC认证服务

    介绍 如何让用户根据已有的账号来进行登录注册呢?在应用中集成华为AGC认证服务SDK来轻松快速地实现这个功能. 本篇内容根据官网文档指导集成过程总结完成,关于集成步骤,官网的资料写的有点多,现在我总结 ...

  4. PHP伪协议与文件包含漏洞1

    PHP文件包含漏洞花样繁多,需配合代码审计. 看能否使用这类漏洞时,主要看: (1)代码中是否有include(),且参数可控: 如: (2)php.ini设置:确保 allow_url_fopen= ...

  5. HttpClient.PatchAsJsonAsync - dotnet/runtime 项目贡献小记

    TL;DR 迫于 PatchAsJsonAsync 方法缺失,我给 dotnet/runtime 项目贡献了相关的 API,可惜要到 .NET7 才能用上. https://github.com/do ...

  6. Scrum Meeting 0529

    零.说明 日期:2021-5-29 任务:简要汇报七日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 七日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 完成后端管 ...

  7. 北航OO第三单元总结

    JML基础梳理及工具链 JML的全称是Java Modeling language,即Java建模语言.JML是一种行为接口规格.它为严格的程序设计提供了一套行之有效的方法.通过JML不仅可以基于规格 ...

  8. stm32串口USART 硬件流控 --学习笔记

    流控的概念源于 RS232 这个标准,在 RS232 标准里面包含了串口.流控的定义.大家一定了解,RS232 中的"RS"是Recommend Standard 的缩写,即&qu ...

  9. 洛谷 P4867 Gty的二逼妹子序列

    链接: P4867 题意: 给出长度为 \(n(1\leq n\leq 10^5)\) 的序列 \(s\),保证\(1\leq s_i\leq n\).有 \(m(1\leq m\leq 10^6)\ ...

  10. usb设备无法识别

    之前用飞线用旧板子飞线连接了一个wifi模块到usb0口上,调试ok的,现在新设计的板子回来了,wifi模块是连接在usb2口上的,系统起来后发现wlan0不存在,用lsusb查看wifi模块的usb ...