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. Sass学习第一天

    Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...

  2. Visual Studio图形调试器详细使用教程(基于DirectX11)

    前言 对于DirectX程序开发者来说,学会使用Visual Studio Graphics Debugger(图形调试器)可以帮助你全面了解渲染管线绑定的资源和运行状态,从而确认问题所在.现在就以我 ...

  3. VIM --使用进阶 -- 插件篇 -- YouCompleteMe -- nerdtree

    系统:ubuntu: 资源:https://github.com/ 其他:想了解都要哪些好用的插件,推荐大家读 http://blog.csdn.net/mergerly/article/detail ...

  4. Leetcode#88. Merge Sorted Array(合并两个有序数组)

    题目描述 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...

  5. ionic 扫描二维码 Barcode Scanner、QR Scanner、ZBar

    1.简介 ionic 官方给我们提供了三个扫描二维码条形码插件,分别为: Barcode Scanner 样式好看,类似支付宝的扫描框.速度稍微比最后一个慢几百毫秒,主要问题是 Android 部分手 ...

  6. 【转】浅析Java中的final关键字

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. ...

  7. WPF中触发器Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger几种

    WPF中有种叫做触发器的东西(记住不是数据库的trigger哦).它的主要作用是根据trigger的不同条件来自动更改外观属性,或者执行动画等操作. WPFtrigger的主要类型有:Trigger. ...

  8. UVA1513 Movie collection

    传送门 题意 KI先生有收集大量小电影的习惯, 他把他的珍藏理成一大摞.无论何时他想观看这一些电影的一部,他从这一摞电影中找出这一部电影,小心地将其拿出,以确保这一摞电影不会倒塌. 自从那一摞电影变得 ...

  9. Connet Scanning

    1.connect scanning with Scapy,   Tools that perform  Tcp scans operate by performing a full there-wa ...

  10. MySql在Mac上的安装与配置详解

    Mac下安装mysql5.7 完整步骤(图文详解) 转载---原文地址:https://www.jb51.net/article/103841.htm 本篇文章主要介绍了Mac下安装mysql5.7 ...