vue 列表过滤和排序
<body>
<div id="root">
<h1>员工列表</h1>
<input type="text" placeholder="请输入查询名字" v-model="keywrde">
<button @click="suotType=1"> 升序排序</button>
<button @click="suotType=2">降序排序</button>
<button @click="suotType=0"> 原顺序</button>
<ul>
<!-- in 还可以换成of -->
<li v-for="(p,index) of filPerons" :key="index">
<!-- key ""里可以换成index 但是执行效率低 用p.id 执行的效率高 -->
{{p.name}}-{{p.age}}-{{p.phone}}-{{p.score}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip=false;//阻止运行时提示开发版本
new Vue({
el:"#root",
data:{
keywrde:'',
suotType:0, //0原顺序 1升序 2升序
perons:[
{id:'001',name:'老徐',age:20,phone:'13608806913',score:65.4},
{id:'002',name:'许老',age:13,phone:'19958030698',score:89.4},
{id:'003',name:'张大柱',age:20,phone:'13608806913',score:88},
{id:'004',name:'李大钊',age:30,phone:'15925503566',score:65.4},
{id:'004',name:'李总',age:10,phone:'1557578988788',score:55.4},
{id:'004',name:'张三',age:50,phone:'15925503566',score:96}
]
},
computed:{
//计算属性
filPerons(){
//定义一个数组
const arr= this.perons.filter((p)=>{
return p.name.indexOf(this.keywrde) !==-1
})
//判断是否需要排序
if (this.suotType) {
arr.sort((p1,p2)=>{
return this.suotType ===1? p2.score-p1.score : p1.score-p2.score//升序后一个减前一个 降序前一个减后一个
})
}
return arr
}
} })
</script>
vue 列表过滤和排序的更多相关文章
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- VUE：列表的过滤与排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- (尚010)Vue列表的搜素和排序
1.test010.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）
文章目录 1.基本列表 1.1 基本知识 1.2 代码实例 1.3 测试效果 2.key的原理 2.1基本知识 2.2 代码实例 2.3 测试效果 2.4 原理图解 3.列表过滤 3.1 代码实例 3 ...
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件
分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...
- drf--搜索、过滤、排序组件
目录 drf--搜索.过滤.排序组件 过滤 DjangoFilterBackend 自定义过滤器django-filter模块 自定义过滤类 搜索SearchFilter 排序OrderingFilt ...
- vue实现拖拽排序
基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...
随机推荐
- Java 中会存在内存泄漏吗，请简单描述？
理论上 Java 因为有垃圾回收机制(GC)不会存在内存泄露问题(这也是 Java 被 广泛使用于服务器端编程的一个重要原因):然而在实际开发中,可能会存在无 用但可达的对象,这些对象不能被 GC 回 ...
- 什么是通用 SQL 函数？
1.CONCAT(A, B) – 连接两个字符串值以创建单个字符串输出.通常用于将两个 或多个字段合并为一个字段. 2.FORMAT(X, D)- 格式化数字 X 到 D 有效数字. 3.CURRDA ...
- Unsafe Rust 能做什么
在不安全的 Rust 中唯一不同的是,你可以: 对原始指针进行解引用 调用"不安全"的函数(包括 C 函数.编译器的内建指令和原始分配器. 实现"不安全"的特性 ...
- 推荐一个用于压缩图片的JS插件：localResizeIMG
惯例,先贴传送门:https://github.com/think2011/localResizeIMG 首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来 ...
- 要多简单就有多简单的H5拍照加水印
来一个简单粗暴的gif演示图 先来html 内容 <video id="video" width="320" height="240" ...
- PC端免费高效的同声翻译
疫情期间上网课,对于英语听力较差或者需要观看英文视频,但实际上并没有双语字幕的这种情况下需要找一个实时的翻译工具.虽然说手机上此类软件比较多,但电脑上没有特别合适的应用可以做为一个免费实时翻译.哪怕是 ...
- pydev+eclipse写python代码
首先,下载pydev:PyDev for Eclipse - Browse /pydev at SourceForge.net (建议下载到本地,之前看其他文章时,进行了如下安装: 启动 Eclips ...
- java栈stack和堆heap的工作原理,用途及区别？举例说明
java堆和栈的区别[新手可忽略不影响继续学习] Java中内存分成两种:一种是栈stack,一种是堆heap.函数中的一些基本类型的变量(int, float)和对象的引用变量(reference) ...
- 字符串反转&说反话
题目描述 写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串.(字符串长度不超过1000) 输入描述: 输入N个字符 输出描述: 输出该字符串反转后的字符串 示例1 输入 abcd 输出 d ...
- springMVC中获取request和response对象的几种方式（RequestContextHolder）
springMVC中获取request和response对象的几种方式 1.最简单方式:参数 2.加入监听器,然后在代码里面获取 原文链接:https://blog.csdn.net/weixin_4 ...