vue-通过name进行数据过滤
- <template>
- <div>
- <h3>搜索列表</h3>
- <input type="text" placeholder="请输入要搜索的名字" v-model="searchName">
- <ul>
- <li v-for="(person,index) in fileterPersons" :key="personsKeys[index]">
- {{personsKeys[index]}}--
- {{person.name}}--
- {{person.age}}--
- {{person.sex}}--
- </li>
- </ul>
- </div>
- </template>
- <script>
- import shortid from 'shortid'
- export default{
- name:"list",
- data(){
- return {
- searchName:'',
- persons:[
- {name:'张三',age:18,sex:'男'},
- {name:'李四2',age:128,sex:'男'},
- {name:'王五',age:138,sex:'男'},
- {name:'赵六',age:148,sex:'男'},
- {name:'田七',age:158,sex:'男'},
- {name:'邢八',age:168,sex:'男'},
- {name:'高久',age:178,sex:'男'},
- ],
- personsKeys:[],
- }
- },
- //生命周期方法
- mounted(){
- this.personsKeys=this.persons.map(v=>shortid.generate())
- },
- computed:{
- //过滤
- fileterPersons(){
- //1获取数据
- let {searchName,persons}=this;
- //2取出数组中的数据
- let arr=[...persons];
- //3.过滤数组
- if(searchName.trim()){
- arr=persons.filter((p)=>(p.name.indexOf(searchName)!==-1));
- }
- return arr;
- }
- }
- }
- </script>
- <style scoped>
- ul{
- list-style: none;
- }
- ul li{
- padding:3px 0;
- }
- </style>
思路:
1.要知道使用计算属性来进行操作,computed
vue-通过name进行数据过滤的更多相关文章
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue中如何实现数据的双向绑定
vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...
- ABP框架 - 数据过滤
文档目录 本节内容: 简介 预定义过滤 ISoftDelete 何时可用? IMustHaveTenant 何时可用? IMayHaveTenant 何时可用? 禁用过滤 关于using声明 关于多租 ...
- C#实现通用数据过滤窗体
最近一直在做WINFORM项目,所以经常有些新的想法或尝试与大家分享,之前与大家分享了通用窗体遮罩层.通用可附加数据绑定的DataGridView.窗体渐显,今天来分享一个大家在其它软件中常见的功能: ...
- php数据过滤函数与方法示例【转载】
1.php提交数据过滤的基本原则 1)提交变量进数据库时,我们必须使用addslashes()进行过滤,像我们的注入问题,一个addslashes()也就搞定了.其实在涉及到变量取值时,intval( ...
- PHP数据过滤
1.php提交数据过滤的基本原则 1)提交变量进数据库时,我们必须使用addslashes()进行过滤,像我们的注入问题,一个addslashes()也就搞定了.其实在涉及到变量取值时,intval ...
- SQL学习之高级数据过滤
一.高级数据过滤之IN操作符 IN 操作符用来指定条件范围,范围中的每个条件都可以进行匹配.IN取一组由逗号分隔.括在圆括号中的合法值.代码如下: select ItemId,ItemName,Che ...
- FastReport 数据过滤
FastReport 数据过滤 在DataBind 的 OnBeforePrint 设置条件 例:显示 大于0 的数据 procedure MasterData1OnBeforePrint(Sen ...
- .NET WinForm程序中给DataGridView表头添加下拉列表实现数据过滤
转:http://www.cnblogs.com/jaxu/archive/2011/08/04/2127365.html 我们见过Excel中的数据过滤功能,可以通过点击表头上的下拉列表来实现数据的 ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
随机推荐
- js--标签语法的使用
前言 在日常开发中我们经常使用到递归.break.continue.return等语句改变程序运行的位置,其实,在 JavaScript 中还提供了标签语句,用于标记指定的代码块,便于跳转到指定的位置 ...
- ReentrantLock可重入锁、公平锁非公平锁区别与实现原理
ReentrantLock是lock接口的一个实现类,里面实现了可重入锁和公平锁非公平锁 ReentrantLock公平锁和不公平锁实现原理 公平锁会获取锁时会判断阻塞队列里是否有线程再等待,若有获取 ...
- iOS平台 | 快速集成华为AGC认证服务
介绍 如何让用户根据已有的账号来进行登录注册呢?在应用中集成华为AGC认证服务SDK来轻松快速地实现这个功能. 本篇内容根据官网文档指导集成过程总结完成,关于集成步骤,官网的资料写的有点多,现在我总结 ...
- PHP伪协议与文件包含漏洞1
PHP文件包含漏洞花样繁多,需配合代码审计. 看能否使用这类漏洞时,主要看: (1)代码中是否有include(),且参数可控: 如: (2)php.ini设置:确保 allow_url_fopen= ...
- HttpClient.PatchAsJsonAsync - dotnet/runtime 项目贡献小记
TL;DR 迫于 PatchAsJsonAsync 方法缺失,我给 dotnet/runtime 项目贡献了相关的 API,可惜要到 .NET7 才能用上. https://github.com/do ...
- Scrum Meeting 0529
零.说明 日期:2021-5-29 任务:简要汇报七日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 七日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 完成后端管 ...
- 北航OO第三单元总结
JML基础梳理及工具链 JML的全称是Java Modeling language,即Java建模语言.JML是一种行为接口规格.它为严格的程序设计提供了一套行之有效的方法.通过JML不仅可以基于规格 ...
- stm32串口USART 硬件流控 --学习笔记
流控的概念源于 RS232 这个标准,在 RS232 标准里面包含了串口.流控的定义.大家一定了解,RS232 中的"RS"是Recommend Standard 的缩写,即&qu ...
- 洛谷 P4867 Gty的二逼妹子序列
链接: P4867 题意: 给出长度为 \(n(1\leq n\leq 10^5)\) 的序列 \(s\),保证\(1\leq s_i\leq n\).有 \(m(1\leq m\leq 10^6)\ ...
- usb设备无法识别
之前用飞线用旧板子飞线连接了一个wifi模块到usb0口上,调试ok的,现在新设计的板子回来了,wifi模块是连接在usb2口上的,系统起来后发现wlan0不存在,用lsusb查看wifi模块的usb ...