(尚010)Vue列表的搜素和排序
1.test010.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.列表过滤
2.列表排序
-->
<div id="test">
<input type="text" v-model="searchName">
<ul>
<!--filterPersons应该为persons过滤后产生的结果-->
<li v-for="(p,index) in filterPersons" :key="index">
{{index}}--{{p.name}}---{{p.age}}
</li>
</ul> <!--需要怎样排序,需要给orderType设置值-->
<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 type="text/javascript">
new Vue({
el:'#test',
data:{
searchName:'',
orderType:0,//自己设计:0代表原本顺序,1代表升序排序,2代表降序排序
//数组
persons:[
{name:'赵云',age:'18'},
{name:'张飞',age:'16'},
{name:'关羽',age:'21'},
{name:'刘备',age:'2'}
],
},
computed:{
//搜索过滤
filterPersons(){
//取出相关数据,并进行结构赋值
const {searchName,persons,orderType}=this
//定义最终返回数组(最终需要显示的数组)
let fPersons; //对persons进行过滤
//需要看p.name中是否包含searchName,调用这个方法p.name.indexOf(searchName):indexOf为看字符串searchName在当前字符串p.name的下标
//一旦不等于-1,说明包含了
fPersons=persons.filter(p=>p.name.indexOf(searchName)!==-1);
//排序
if(orderType!==0){
//排序调用sort()方法,还需要传比较函数
fPersons.sort(function(p1,p2){//如果返回的是负数,p1在前;返回正数p2在前
//1代表升序排序,2代表降序排序
if(orderType===2){
return p2.age-p1.age;
}else{
return p1.age-p2.age;
}
})
}
return fPersons;
}
}, methods:{
setOrderType(orderType){
this.orderType=orderType
}
}
})
</script>
</body>
</html>
(尚010)Vue列表的搜素和排序的更多相关文章
- (尚009)Vue列表渲染
变异方法:说白了就是对原方法进行了包装,包装后实现了2个功能1:实现原方法的功能;2.更新界面. 1.test009.html <!DOCTYPE html><html lang=& ...
- Vue列表渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson09 一 for循环数组 <!DOCTYPE html> ...
- HDU 1226 超级密码 （搜素）
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1226 题意简单,本来是一道很简单的搜素题目. 但是有两个bug: 1.M个整数可能有重复的. 2.N可 ...
- Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...
- 开源搜素引擎：Lucene、Solr、Elasticsearch、Sphinx优劣势比较
https://blog.csdn.net/belalds/article/details/82667692 开源搜索引擎分类 1.Lucene系搜索引擎,java开发,包括: Lucene Solr ...
- vue列表数据倒计时存在的一些坑
vue 列表数据倒计时,在页面销毁前需要清除定时器,否着会报错. export default { data() { return { list: [] } }, mounted() { for (l ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- vue 获得当前无素并做相应处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
随机推荐
- C++ 多态详解及常见面试题
今天,讲一讲多态: 多态就是不同对象对同一行为会有不同的状态.(举例 : 学生和成人都去买票时,学生会打折,成人不会) 实现多态有两个条件: 一是虚函数重写,重写就是用来设置不同状态的 二是对象调 ...
- php策略模式实现简单计算器
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- beego 读取配置
不知道是不是坑 官方文档 https://beego.me/docs/module/config.md . 解决办法: 1 导入 config "github.com/astaxie/bee ...
- SpringCloud之Hystrix集群及集群监控turbine
目的: Hystrix集群及监控turbine Feign.Hystrix整合之服务熔断服务降级彻底解耦 集群后超时设置 Hystrix集群及监控turbine 新建一个springboot工程mic ...
- UnityShader - 渲染管线
定义: 显卡内部处理图像信号的并行处理单元,也称为渲染流水线 发生位置: CPU和GPU 渲染机理: 将图像所具备的图形信息(顶点.纹理.材质.摄像机位置等)经过一系列阶段的处理,最终转换为屏幕上的图 ...
- ubuntu 16.04 英伟达驱动安装
参考:https://blog.csdn.net/breeze5428/article/details/80013753 换了一个新的地方,得重新配置Ubuntu 16.04,在配置NVIDIA驱动的 ...
- ActiveMQ（一）
下载地址:http://activemq.apache.org/download.html 换数据源: ActiveMQ的独占消费
- docker查看容器日志
原文:docker查看容器日志 前言 $ sudo docker logs -f -t --tail 行数 容器名 1 2 1.命令查看 root@c68d4b5dd583c4f4ea30da2989 ...
- 【洛谷 P2051】 [AHOI2009]中国象棋（DP）
题目链接 首先想到状压dp,但是\(n,m\)高达100,怎么压? 容易发现,每行每列最多两个象棋,否则就直接gg了. 一个巧妙的设置状态的方式是,只需要记录到当前行有多少列是放了1个炮和2个炮. 然 ...
- vue-resource 中 get / post / jsonp 三种请求方式的异同
let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2';let params ...