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_小项目_模糊搜索(列表过滤)_结果排序的更多相关文章

  1. vue_小项目_吃饭睡觉打豆豆

    vue_小项目_吃饭睡觉打豆豆 onmouseenter 和 onmouseleave : 在 移入/移出 子元素时不会重复触发 onmouseover 和 onmouseout : 在 移入/移出 ...

  2. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

  3. Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作

    32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...

  4. Flutter实战视频-移动电商-25.列表页_使用Provide控制子类-1

    25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 ...

  5. Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2

    26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category ...

  6. Flutter实战视频-移动电商-27.列表页_现有Bug修复和完善

    27.列表页_现有Bug修复和完善 小解决小bug 默认右侧的小类没有被加载 数据加载完成后,就list的第一个子对象传递给provide进行赋值,这样右侧的小类就刷新了数据 默认加载了第一个类别 调 ...

  7. Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试

    28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...

  8. Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局

    30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...

  9. Flutter实战视频-移动电商-31.列表页_列表切换交互制作

    31.列表页_列表切换交互制作 博客地址:https://jspang.com/post/FlutterShop.html#toc-c42 点击左侧的大类右边的小类也跟着变化 新建provide 要改 ...

随机推荐

  1. Java设计模式之原型设计模式

    概述 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. 设计模式 ...

  2. [物理学与PDEs]第5章第1节 引言

    1.  弹性力学是研究弹性体在荷载的作用下, 其内力 (应力) 和变形所满足的规律的学科. 2.  荷载主要有两种, 一是作用在弹性体上的机械力 (本章讨论); 二是由温度等各种能导致弹性体变形的物理 ...

  3. $m$ 整除 $10^k$ 的一个充分条件

    若 (1) 既约分数 $\cfrac{n}{m}$ 满足 $0<\cfrac{n}{m}<1$; (2) 分数 $\cfrac{n}{m}$ 可以化为小数部分的一个循环节有 $k$ 位数字 ...

  4. burp suite 基础入门超详细教程

    介绍: 都是我个人了解到的信息,,分享给大家 欢迎指正 burp suite 被誉为web安全工具中的瑞士军刀. 大家知道,瑞士军刀,都是体积小,功能强悍,.西方军队的标配.说这么多,只是想强调这款工 ...

  5. 51nod 1016 水仙花数

    大水仙花数模板+1…… #include<stdio.h> #include<math.h> #include<queue> #include<vector& ...

  6. 菜鸟博客装饰分享CSS+HTML+js

    博客布局更改,各种百度,自己修改,搞成现在这样,有兴趣的朋友可以复制我下面的把自己博客覆盖了,然后在进行更改 不懂可加群问我:675678830 如果想开通打赏,用到js,需要在 下列中 博客侧边栏公 ...

  7. cmake find_package 命令

    1. find_package(<Name>)命令首先会在模块路径中寻找 Find<name>.cmake,这是查找库的一个典型方式. 具体查找路径依次为CMake:  变量$ ...

  8. 简单SQL注入

    既然是简单的,估计也就是''字符型把,输入'or'1 以下是输出结果,or没被过滤,单引号也没有 呢么用union联合注入试试,提交了'-1 union/**/select 1 and '1,发现回显 ...

  9. [Ynoi2018]末日时在做什么?有没有空?可以来拯救吗?

    这道题真的超级...毒瘤 + 卡常 + 耗 RP 啊... 传送门 noteskey 题解看 shadowice 大仙 的 code 如果发现自己 T 掉了,别心急,洗把脸再交一遍试试... //by ...

  10. tomcat日志格式中的含义

    %a - 远程IP地址 %A - 本地IP地址 %b - 发送的字节数,不包括HTTP头,或“ - ”如果没有发送字节 %B - 发送的字节数,不包括HTTP头 %h - 远程主机名 %H - 请求协 ...