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 ...
随机推荐
- 20190226-SecureCRT连接linux显示中文乱码
SecureCRT连接我的Ubuntu14时中文显示乱码 解决办法: 在session options里选择UTF-8
- ES scroll（ES游标） 解决深分页
ES scroll(ES游标) 解决深分页. Why 当Elasticsearch响应请求时,它必须确定docs的顺序,排列响应结果.如果请求的页数较少(假设每页20个docs), Elasticse ...
- HelloWorld编译正常运行报noclassdeffounderror
修改环境变量classpath: 原理: classpath是搜索java类库的路径:当你输入命令“java HelloWorld“时,会根据classpath寻找HelloWorld.class:一 ...
- BA-通讯总线-百通1419a和9841
百通1419A线缆的简单介绍: Belden1419A- Belden电缆线1419A 多股导体—低容计算机电缆 FOR EIA RS-232/422 Belden 1419A是24 AWG(7*32 ...
- servlet3.0理解
1.servlet是用Java编写的服务器端程序,服务器端程序,服务器端程序. 2.Servlet运行于支持Java的应用服务器中.spring mvc有自己的实现servlet 从原理上讲,Serv ...
- UML期末绘图及细节总结
往届期末绘图的题目例如以下所看到的: Read the providing materials carefully, and then do tasks. 2.1: Use Case Diagram ...
- UVA 294 - Divisors 因子个数
Mathematicians love all sorts of odd properties of numbers. For instance, they consider 945 to be an ...
- 阿里云服务器用Docker配置运行nginx并访问
一.Docker拉取nginx镜像 docker pull nginx:1.12.2 这里是下载的是nginx的1.12.2版本,其他版本的镜像请访问https://hub.docker.com/r/ ...
- Python学习小计
1.初学Python最好选择2.7版本,因为大部分Python书籍的示例代码是基于这个版本的 2.Python安装可以参考百度经验完成 如果在电脑上同时安装2个版本,则CMD启动时只需要: py -2 ...
- JQuery （总结）
延迟触发事件 Ajax异步请求数据 Jquery事件: Focus获得焦点 blur失去焦点 Change内容在变化的时候 Click点击事件 ---------------------------- ...