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 要改 ...
随机推荐
- 源码来袭:call、apply手写实现与应用
关于this指向可以了解我的另一篇博客:JavaScript中的this指向规则. 一.call与apply的使用 回顾call与apply的this指向: var value = "win ...
- FM(工程实现)
摘自: https://www.cnblogs.com/AndyJee/p/8032553.html 一.FM模型函数 二.FM对参数求导结果 三.算法实现 主要超参数有:初始化参数.学习率.正则化稀 ...
- Vue技术内幕 出去看看吧 榨干部分小细节
vue\src\platforms\web\entry-runtime-with-compiler.js /** * Get outerHTML of elements, taking care * ...
- JS中some(),every(),forEach(),map(),filter()区别
JS在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了. 刚开始接触这些倒也记得不是很清楚,在此纪录一下以加深 ...
- 408 JavaScript 变量、数据类型、正则
JavaScript 特点 是一门解释性脚本语言 .基于对象脚本编程.简单性(弱类型).安全性.动态性.跨平台 作用: 初学js 引入方式 与html有相同之处 也是3种1 用JavaScript前缀 ...
- 设计模式一: 单例模式(Singleton)
简介 单例模式是属于创建型模式的一种(另外两种分别是结构型模式,行为型模式).是设计模式中最为简单的一种. 英文单词Singleton的数学含义是"有且仅有一个元素的集合". 从实 ...
- Centos7.5 安装VirtualBox增强工具
一.安装 1.自带tools: 选择VirtualBox工具栏 => 设备 => 安装增强功能 2.挂载光驱 3.进入光驱目录,执行(一定要用root权限执行) ①安装gcc yum i ...
- POJ 1410 Intersection (线段和矩形相交)
题目: Description You are to write a program that has to decide whether a given line segment intersect ...
- div的onclick事件怎么失效了?
1 前言 div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了 2 代码 <!DOCTYP ...
- Nginx配置https证书
目前的大趋势是升级HTTP为HTTPS 本章介绍怎样实装HTTPS证书 # 如果报 ssl 错误是Nginx安装时未安装ssl 请重新编译nginx 可以参考我之前的博客 申请/获取https 这里就 ...