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 ...
随机推荐
- react 简单在页面中输出一段文字
之前用脚手架创建了一个react项目,将react自带的src文件夹删除后创建一个空的src文件夹 在src文件夹中创建一个index.jsx文件作为JS入口文件并创建一个hello组件 现在我们进入 ...
- Git clone时出现Please make sure you have the correct access rights and the repository exists.问题已解决。
看了好多资料终于搞定了git 中clone命令报错这个问题,废话不多说直接上步骤希望对大家有帮助. 1 删除.ssh文件夹(直接搜索该文件夹)下的known_hosts(手动删除即可,不需要git ...
- SSH框架整合截图总结(一)
分页相关属性 --------------------------------------------------------------- 分页思路表单提交(只需传递当前页的值) ->acti ...
- BA-Delta知识点
问题: DSM-RTR的网络负载能力是怎样的?每条总线带32个模块吗?MS/TP总线上的模块需要拨地址码吗?最大可以承载多少个点? 答:理论值是30,最佳性能是21个,一般情况25-28个 linkn ...
- BA-siemens-desigo_cc安装
1.首先安装NT3.5和NT4.0软件 2.按照以下网址的教程配置好IIS和WEBDAV环境:http://www.cnblogs.com/xiongzai/p/4126493.html 文章写的真不 ...
- T4系列文章之2：T4工具简介、调试以及T4运行原理
一.前言 经过第一篇,我想大家现在对T4有了基本的印象,应该对T4有了一个大致的了解吧.现在,我们接着来讲一下T4的工具,然后下一篇我就开始T4的用法了.各位客官,就等了. 二.工具介绍 2.1 上图 ...
- 快速排序、查第k大
参考这里,提到两种方法,并说第二种好: http://www.cnblogs.com/qsort/archive/2011/05/09/2041653.html qsort的每一趟中,选定pivot以 ...
- Struts文件下载具体解释
在做项目中上传下载肯定是少不了的,本博文对struts2的下载进行解释并附上部分代码 1.action类 public class FileDownLoadAction extends ActionS ...
- 深入浅出VGA和DVI接口
由CrazyBingo修改…… 前言:目前显示器的主流接口是VGA.DVI以及HDMI,再加上一个比较少有的Displayport接口,一共可归为四类.相信不少消费者对这些接口认识并不多,特别是普通用 ...
- 匹配替换指定文本为html标签
最近看了一道前端面试题,是关于正则的,用尽可能低复杂度的函数,匹配替换指定文本为html标签,题目是这样的: 特定语法匹配替换 说明:匹配字符串中形如 =g文字文字= 的语法,并将相应部分转化为对应的 ...