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 ...
随机推荐
- C# 低耦合 高内聚
低耦合 loosely Coupling 松散的耦合关系=炮友 couple=夫妻 夫妻=法律约束.家庭.生活.财产.繁衍 炮友:吃喝玩乐,不会产生感情方面的依赖 内聚性 内聚性又称块内联 ...
- json_encode把中文字符的数组转为json格式
function ch_json_encode($data) { /** * 将中文编码 * @param array $data * @returnstring */ function ch_url ...
- SQL-Oracle-创建表空间，用户，授权
--创建表空间 create tablespace imark datafile 'E:\oracle\product\10.2.0\oradata\orcl\imark.dbf' size 500M ...
- xcode对照两个分支中同一个文件
对于同一个项目的两个分支,由于两个分支可能各自都做了一些改动.所以通过Source Control中的History...功能是无法查看的.例如以下图: 这个时候.我们须要用到xcode的另外一个功能 ...
- 在IntelliJ IDEA中创建Web项目
在IntelliJ IDEA中创建Web项目 在IntelliJ IDEA中创建Web项目1,创建Maven WebProject选择File>New>Project 出现New Proj ...
- Unity3D：实现人物转向与移动
在网上有非常多通过射线方式实现的人物行走控制脚本,可是假设仅仅是想通过键盘按键来控制的话.比方进行第三人称视角控制,事实上仅仅须要进行简单的角度变换就可以.思路例如以下: 1.依照顺时针方向设定前.右 ...
- Methods Collection of Enumerating Com Port in Windows, by C
According to this stack overflow thread, PJ Naughter has implemented 9 methods to emunerate com port ...
- 【HDU 2176】 取(m堆)石子游戏
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=2176 [算法] Nim博弈 当石子数异或和不为0时,先手必胜,否则先手必败 设石子异或和为S 如果 ...
- 绘图中的drawRect
rect参数:代表的是当前view的bounds 1 为什么要在drawRect方法里面写绘图代码 因为只有在这个方法中才能获取到当前view相关的图形上下文对象 有了这个图形上写文对象后才能进行绘图 ...
- datatable dataRow
DataRow[] Drs = DtStockProduct.Select(Condition11); DtResult = DtStockProduct.Clone(); datatble tabl ...