vue_小项目_模糊搜索(列表过滤)_结果排序
html
<div id="test">
<label>
<input type="text" v-model="searchWord" placeholder="搜索一下"/>
</label>
<button type="button" @click="orderType=1">原来排序</button>
<button type="button" @click="orderType=2">升序排序</button>
<button type="button" @click="orderType=3">降序排序</button> <ul>
<li v-for="(p, index) in searchResult">
{{p.name}}----{{p.age}}
</li>
</ul> </div>
js
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#test",
data(){
return {
persons:[
{name:"Tom", age:18},
{name:"Jack", age:16},
{name:"Jerry", age:15},
{name:"Kate", age:17},
{name:"Lee", age:14}
],
searchWord: "",
orderType: 1
}
},
computed:{
searchResult(){
const {orderType, searchWord, persons} = this; let result = persons.filter(person=>person.name.indexOf(searchWord)!==-1); if(orderType !== 1){
result.sort((one, two)=>{
if(orderType === 2){
return one.age - two.age
}else if(orderType === 3){
return two.age - one.age
}
})
} return result;
}
}
})
</script>
vue_小项目_模糊搜索(列表过滤)_结果排序的更多相关文章
- vue_小项目_吃饭睡觉打豆豆
vue_小项目_吃饭睡觉打豆豆 onmouseenter 和 onmouseleave : 在 移入/移出 子元素时不会重复触发 onmouseover 和 onmouseout : 在 移入/移出 ...
- Flutter实战视频-移动电商-34.列表页_小BUG的修复
34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...
- Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...
- Flutter实战视频-移动电商-25.列表页_使用Provide控制子类-1
25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 ...
- Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2
26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category ...
- Flutter实战视频-移动电商-27.列表页_现有Bug修复和完善
27.列表页_现有Bug修复和完善 小解决小bug 默认右侧的小类没有被加载 数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据 默认加载了第一个类别 调 ...
- Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试
28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...
- Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局
30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...
- Flutter实战视频-移动电商-31.列表页_列表切换交互制作
31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...
随机推荐
- Maven 学习总结 (二) 之 生命周期与插件
五.生命周期与插件 1.Maven有三套独立的生命周期:clean.default和site. clean生命周期的目的是清理项目,default生命周期的目的是构建项目,site生命周期的目的是建立 ...
- PyQt5之窗口类型
[TOC] 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 写在开头 1.1 本文内容 本文的主要内容:PyQt中的窗口部件:QMainWindow,QWidget,QDialog. 上述三 ...
- JavaScript对象 Object类型基础
前言 JavaScript 对象是整个语言学习的一个难点.本文主要带大家入门学习Object知识 对象定义 javascript的基本数据类型包括undefined.null.boolean.stri ...
- div的默认position值是静态的static
div的默认position值是静态的static,如果相对父元素使用Position:absolute的话,需要手动在父元素上添加Position.
- kde钱包 忘记密码
转自 https://forum.suse.org.cn/t/kwallet/4367/2 修改 ~/.config/kwalletrc文件的First Use=false 改成 true 应该可以重 ...
- 基于STM32F1的时钟芯片DS1302驱动
目录 DS1302.h源代码 DS1302.c源代码 DS1302.h源代码 /** ********************************************************* ...
- Subsequence(序列自动机模板题)
题目链接:https://nanti.jisuanke.com/t/38232 题目大意:给你一个字符串,然后再给你m个字符串,然后问你在第一个字符串中不连续的子串能不能构成输入的子串. 具体思路:构 ...
- 330 div+css Experience
今天学习的div,感觉对编辑html更为方便快捷,但还是需要多练,多熟悉一下思路和逻辑方式 越来越感觉,代码不是重要的,重要的是方向和思路,am的float clearfloat 及属性,还有over ...
- dubbo负载均衡与集群集群容错
1.负载均衡 在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用. 1. 负载均衡策略 Random LoadBalance 随机,按权重设置随机概率.(默认值)在一个 ...
- Codeforces 877E - Danil and a Part-time Job 线段树+dfs序
给一个有根树,1e5个节点,每个节点有权值0/.1,1e5操作:1.将一个点的子树上所有点权值取反2.查询一个点的子树的权值和 题解: 先深搜整颗树,用dfs序建立每个点对应的区间,等于把树拍扁成 ...