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 ...
随机推荐
- Innodb性能优化之参数设置
现在,Innodb是Mysql最多使用的存储引擎.其性能一直广受关注.本文通过基本的参数设置来提高其性能. innodb_buffer_pool_size 缓冲池大小.这是innodb参数中最重要的设 ...
- js sort根据数值大小自动排序（转）
var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50; arrDemo[2] = 51; arrDemo[3] = 100; arrD ...
- Oracle解除表锁定问题
1.肯定是你同时打开了多个操作页面,要记得关闭多个打开的sql窗口. 2.可以变相删除表,再重新创建一张同名的表来解除表被锁住的问题
- 关联规则推荐及Apriori算法
参考这篇文章: http://blog.csdn.net/rongyongfeikai2/article/details/40457827 这条关联规则的支持度:support = P(A并B) 这条 ...
- 用opencv实现的PCA算法，非API调用
理论參考文献:但此文没有代码实现.这里自己实现一下,让理解更为深刻 问题:如果在IR中我们建立的文档-词项矩阵中,有两个词项为"learn"和"study",在 ...
- 拷贝构造函数(深拷贝vs浅拷贝)
拷贝构造函数(深拷贝vs浅拷贝) 类对象之间的初始化是由类的拷贝构造函数完毕的.它是一种特殊的构造函数,它的作用是用一个已知的对象来初始化还有一个对象.假设在类中没有显式地声明一个拷贝构造函数.那么, ...
- （十进制高速幂+矩阵优化）BZOJ 3240 3240: [Noi2013]矩阵游戏
题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=3240 3240: [Noi2013]矩阵游戏 Time Limit: 10 Sec M ...
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。
请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 先给大家看看图片效果,大 ...
- Flask-Restful
定义Restful的视图 安装:pip install flask-restful 如果使用Flask-restful,那么定义视图函数的时候,就要继承flask_restful.Resourse类, ...
- Python—JSON数据解析
1.安装pip pip是python的包管理工具,使用它能非常方便地安装和卸载各种python工具包 第一步:直接用浏览器访问地址:https://raw.github.com/pypa/pip/ma ...