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 ...
随机推荐
- Python中pymongo find 遍历数据导致timeout
背景 在读取大约200W左右的数据的时候采用游标形式进行数据遍历时,超过10分钟就报错 timeout 原因 pymongo游标会在10分钟之后被关闭 解决方案 db.find({}, no_curs ...
- Vulnhub实战-FALL靶机👻
Vulnhub实战-FULL靶机 下载地址:http://www.vulnhub.com/entry/digitalworldlocal-fall,726/ 1.描述 通过描述我们可以知道这个靶机枚举 ...
- 初始CSS01
CSS基础知识 CSS介绍 CSS全称为层叠样式表,与HTML相辅相成,实现网页的排版布局与样式美化. 使用方式 根据样式表在页面中呈现的方式不同,可以通过以下三种方式在页面中使用格式 内联样式 改样 ...
- HTTP标签
系统的http状态码知识,我是在<图解http里学习的>. 状态码的职责是告知从服务器端返回的请求结果. 分类如下: 2XX --> 成功 200 OK(一般情况) 204 No C ...
- Abp VNext分表分库,拒绝手动,我们要happy coding
Abp VNext 分表分库 ShardingCore ShardingCore 易用.简单.高性能.普适性,是一款扩展针对efcore生态下的分表分库的扩展解决方案,支持efcore2+的所有版本, ...
- [软工顶级理解组] Beta阶段测试报告
在测试过程中发现了多少Bug? 测试阶段发现并已修复的bug: 尚且存在,但是难以解决或者不影响使用的bug: 计算重修课程的时候,如果重修课程的课程号和原课程号不同,则GPA计算会出现误差.但我们无 ...
- 【二食堂】Alpha - 事后分析
事后分析 设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? Alpha阶段要解决的问题是:根据用户标注的信息完成知识图谱的生成渲染.要解决的问题定义得比较 ...
- 基于自定义Validator来验证枚举类型
基于自定义Validator来验证枚举类型 一.背景 二.技术要点 三.实现一个自定义枚举校验. 1.需求. 2.实现步骤 1.自定义一个 Sex 枚举. 2.自定义一个 Enum 注解 3.编写具体 ...
- stm32直流电机驱动与测速
stm32直流电机驱动与测速 说实话就现在的市场应用中stm32已经占到了绝对住到的地位,51已经成为过去式,32的功能更加强大,虽然相应的难度有所增加,但是依然阻止不了大家学习32的脚步,不说大话了 ...
- 实验 1: SDN拓扑实践
(图片和文档是自己写的,因为在CSDN也写了,所以会有自己的水印) 一.实验目的 能够使用源码安装Mininet: 能够使用Mininet的可视化工具生成拓扑: 能够使用Mininet的命令行生成特定 ...