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 要改 ...
随机推荐
- java.lang.OutOfMemoryError: Java heap space内存不足问题
今晚,在定义一个new int[19001][13001]的数组时候内存不够:特转了一下方法: Exception in thread "main" java.lang.OutOf ...
- SpringBoot系列: CommandLineRunner接口的用处
========================================使用 CommandLineRunner 对Spring Bean进行额外初始化==================== ...
- $m$ 整除 $10^k$ 的一个充分条件
若 (1) 既约分数 $\cfrac{n}{m}$ 满足 $0<\cfrac{n}{m}<1$; (2) 分数 $\cfrac{n}{m}$ 可以化为小数部分的一个循环节有 $k$ 位数字 ...
- 常见的游戏AI技术对比(FSM,HFSM,BT,GOAP,HTN,Utilitay,机器学习)
最近研究的内容,比较懒还没写文章,先占个坑,过几天补
- metasploit 教程之基本参数和扫描
前言 首先我也不知道我目前的水平适不适合学习msf. 在了解一些msf之后,反正就是挺想学的.就写博记录一下.如有错误的地方,欢迎各位大佬指正. 感激不尽.! 我理解的msf msf全程metaspl ...
- 【JS】CharToAsciiToBinaryToAsciiToChar
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js&qu ...
- LATEX简易教程
1.LaTeX软件的安装和使用方法A(自助):在MikTeX的官网下载免费的MikTeX编译包并安装.下载WinEdt(收费)或TexMaker(免费)等编辑界面软件并安装.方法B(打包):在ctex ...
- Celery - 一个懂得 异步任务 , 定时任务 , 周期任务 的芹菜
1.什么是Celery?Celery 是芹菜Celery 是基于Python实现的模块, 用于执行异步定时周期任务的其结构的组成是由 1.用户任务 app 2.管道 broker 用于存储 ...
- java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or.....
1,<activity android:name=".DialogActivity" android:theme="@android:style/Theme.Dia ...
- javascript基础 之 保留关键字
1,保留关键字 意思是:特定的字符串要么是已经有指代了要么是未来将要有指代,所以取名字不要用保留关键字里的字符串 js保留关键字 abstract arguments boolean break by ...