VUE：列表的过滤与排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1.列表过滤
2.列表排序
--> <div id="test">
<input type="text" v-model="searchName"/>
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul> <button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el: '#test',
data:{
persons:[
{name:'Tom',age:18},
{name:'Jack',age:16},
{name:'Bob',age:19},
{name:'Rose',age:17}
],
searchName:'',
orderType: 0, //0代表原本，1代表升序，2代表降序
},
computed:{
filterPersons(){
//取出相关数据
const {searchName,persons,orderType}=this
//最终需要显示的数组
let fPersons;
//对persons进行过滤
fPersons=persons.filter(p=> p.name.indexOf(searchName)!==-1) //排序
if(orderType!==0){
fPersons.sort(function(p1,p2){ //返回负数P1在前，返回正数P2在前
//1代表升序，2代表降序
if(orderType===2){
return p2.age-p1.age
}else{
return p1.age-p2.age
}
return p2.age-p1.age
})
} return fPersons
}
},
methods:{
setOrderType(orderType){
this.orderType=orderType
}
}
})
</script>
</body>
</html>
VUE：列表的过滤与排序的更多相关文章
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue列表排序实现中的this问题
最近在看vue框架的知识,然后其中有个例子中的this的写法让我很疑惑 <!DOCTYPE html> <html> <head> <meta charset ...
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件
分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...
- drf--搜索、过滤、排序组件
目录 drf--搜索.过滤.排序组件 过滤 DjangoFilterBackend 自定义过滤器django-filter模块 自定义过滤类 搜索SearchFilter 排序OrderingFilt ...
- drf过滤和排序及异常处理的包装
过滤和排序(4星) 查询所有才需要过滤(根据过滤条件),排序(按某个规律排序) 使用前提: 必须继承的顶层类是GenericAPIView 内置过滤类 内置过滤类使用,在视图类中配置,是模糊查询 使用 ...
- 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView
背景 在前一篇文章<[初学者指南]在ASP.NET MVC 5中创建GridView>中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类似于 ASP.NET web ...
- 《Entity Framework 6 Recipes》中文翻译系列 (27) ------ 第五章 加载实体和导航属性之关联实体过滤、排序、执行聚合操作
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-9 关联实体过滤和排序 问题 你有一实体的实例,你想加载应用了过滤和排序的相关 ...
- MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
随机推荐
- （1）spring boot起步之Hello World【从零开始学Spring Boot】
Spring Boot交流平台 1.1 介绍 自从structs2出现上次的漏洞以后,对spring的关注度开始越来越浓. 以前spring开发需要配置一大堆的xml,后台spring加入了annot ...
- BA-闭式冷却塔系统
- windows系统中软件开发常用的软件
1.windwos快速打开控制面板:热键+r打开运行框,输入control就打开windows的控制面板了 2.windows自带的远程桌面控制系统:mstsc -Microsoft terminal ...
- 第一篇、Android Supersu 权限管理定制，隐藏过滤权限，指定APP最高权限
近期有个需求,在预装ROM的时候,须要权限,可是又不同意全部的应用都有权限,仅仅同意自己的应用有最高的权限(当然没有系统签名情况下). 所以.编译了CM 提取了supersu进行了二次定制,让他进行权 ...
- Android自己定义控件皮肤
Android自己定义控件皮肤 对于Android的自带控件,其外观仅仅能说中规中矩,而我们平时所示Android应用中,一个简单的button都做得十分美观.甚至于很多button在按下时的外观都有 ...
- emacs使用本地emacs server模式打开远程文件
使用emacs的用户都知道,一般要打开远程机器上的文件要使用TrampMode模式,调用方式例如以下: C-x C-f /remotehost:filename RET (or /method:use ...
- 《AndroidStudio每日一贴》3.高速切换代码风格、配色方案和键盘
<AndroidStudio每日一贴>3.高速切换代码风格.配色方案和键盘 高速切换代码风格.配色方案和键盘,使用快捷键: control + ~ 很多其它有用技巧请查看<Andro ...
- Ubuntu下的用户和权限（三）
七.增删群组相关的命令 相同的我们要先介绍两个重要的设定档:/etc/group和/etc/gshadow,前面那个事实上和/etc/passwd一样.而后者就是群组的password表了.先看看长啥 ...
- DOM基础----DOM（一）
DOM(Document Object Model),中文名称为文档对象模型.是处理可扩展标识语言的标准编程接口,主要针对HTML和XML.DOM描绘了一个层次化的节点树,开发者能够加入.改动和移除页 ...
- HDU1237 简单计算器 【栈】+【逆波兰式】
简单计算器 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...