直接贴代码了：

先上输入前的样子：

<style>

#example{margin:100px auto;width:600px;}

.show{margin:10px;}

#searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;}

.content ul li{text-align: center;}

.content ul li span{display: inline-block;width:150px;font-size:15px;color:#000;}

</style>

</head>

<body>

<div id="example">

    <input type="text" id="searchText" placeholder="搜索id或者姓名" v-model="searchData"/>

    <div class="content">

        <ul>

            <li v-for="item in items | filterBy searchData in 'id' 'name' | orderBy 'name' '-1'">

                <span>{{item.id}}</span>

                <span>{{item.name}}</span>

                <span>{{item.time}}</span>

            </li>

        </ul>

    </div>

</div>

<script>

    var example1 = new Vue({

      el: '#example',

      data: {

          searchData:'',

        items: [

            {id:'1008',name:'涛涛',time:'20170207'},

            {id:'1098',name:'合同',time:'20170213'},

            {id:'1107',name:'晓丽',time:'20170304'},

            {id:'1004',name:'小兰',time:'20170112'},

            {id:'1102',name:'财务',time:'20170203'},

            {id:'1108',name:'哈哈',time:'20170208'},

            {id:'1345',name:'测试',time:'20170201'},

        ]

      },

       ready:function(){

        },

        watch:{

            items:{

                handler:function(val,oldval){

                },

                deep:true

            }

        },

        methods:{

        }

    })

</script>

当在输入框中输入'合同'，得到结果如图:

vuejs通过filterBy,orderBy实现搜索筛选，降序排序数据实例的更多相关文章

  1. 通过orderby关键字，LINQ可以实现升序和降序排序。LINQ还支持次要排序。

    通过orderby关键字,LINQ可以实现升序和降序排序.LINQ还支持次要排序. LINQ默认的排序是升序排序,如果你想使用降序排序,就要使用descending关键字. static void M ...

  2. LINQ中的OrderBy实现按照两个字段升序、降序排序操作

    在公司或许有这种需求,先根据第一个某个字段按照升序排序,然后如果相同,在按照第二个某个字降序排序,我们该怎么去实现呢? 现在来教教大家分别使用Labmda和LINQ进行这种操作. 1.先按照第一个字段 ...

  3. c++ sort降序排序

    sort是c++ STL中提供的一个函数模板,可以用来对多种类型进行排序. 默认是升序排序.它有两种使用方法: default (1) template <class RandomAccessI ...

  4. 怎么实现元素ol的降序排序显示

    首先介绍一下什么是ol元素.这里直接引用MDN里面的定义:The HTML <ol> Element (or HTML Ordered List Element) represents a ...

  5. 现在输入 n 个数字， 以逗号， 分开； 然后可选择升或者 降序排序；

    /* 现在输入 n 个数字, 以逗号, 分开: 然后可选择升或者 降序排序: */ import java.util.*; public class bycomma{ public static St ...

  6. java数组降序排序之冒泡排序

    import java.util.Arrays;//必须加载 class Demo{ public static void main(String []args){ int[] arr={3,54,4 ...

  7. 用shell处理以下内容 1、按单词出现频率降序排序！ 2、按字母出现频率降序排序！ the squid project provides a number of resources toassist users design,implement and support squid installations. Please browsethe documentation and support

    此题目有多种解法,sed.awk.tr等等,都可以解决此题,命令运用灵活多变. 编写shell脚本no_20.sh 解法1: #!/bin/bash ###-------------CopyRight ...

  8. DataGridView使用技巧十三：点击列头实现升序和降序排序

    DataGridView 列有三种排序模式.每一列的排序模式是通过该列的 SortMode 属性指定的,该属性可以设置为以下的 DataGridViewColumnSortMode 枚举值之一. Da ...

  9. 【java】实体类中 按照特定的字段 进行升序/降序 排序

    背景: 实际页面上  所有的分值都是按照JSON格式存储在一个字符串中 存储在同一个字段中: {"ownPTotal":"10>0","ownO ...

随机推荐

  1. 网管到CEO的10年逆袭之路

    把我个人近一年来讲的技术人员如何成长的鸡汤课整理了出来,送给大家<网管到CEO的10年逆袭之路>

  2. HC-06蓝牙模块的使用

    HC-06蓝牙模块与HC-05的AT指令变化还是挺大的,在模块上电后红灯闪烁表示未连接成功,常亮表示连接成功,期间只要红灯处于闪烁即是进入了AT模式,可发送AT指令,灯常亮使用AT指令无效.下面是常用 ...

  3. Spring Boot 2.x 启动全过程源码分析（上）入口类剖析

    Spring Boot 的应用教程我们已经分享过很多了,今天来通过源码来分析下它的启动过程,探究下 Spring Boot 为什么这么简便的奥秘. 本篇基于 Spring Boot 2.0.3 版本进 ...

  4. [原创]K8uac bypassUAC(Win7/Wi8/Win10) 过46款杀软影响所有Windows版本

    [原创]K8uac bypassUAC(Win7/Wi8/Win10) 过46款杀软影响所有Windows版本 工具: k8uac编译: VC++ 作者:K8哥哥发布: 2018/11/25 1:30 ...

  5. freemarker变量自加

    [#assign i = 0][#list dateList as item][#assign i = i + 1]<li><input type="radio" ...

  6. 微信JSAPI支付回调

    在微信支付中,当用户支付成功后,微信会把相关支付结果和用户信息发送给商户,商户需要接收处理,并返回应答. 在经历了千幸万苦之,填完了所有的JSAPI支付的坑后(微信JSAPI支付 跟 所遇到的那些坑) ...

  7. java提高（4）---数组增删 list删除 map删除

    数组增删 集合删除 一.数组增删 package com.test; import java.util.List; import java.util.ArrayList; import java.ut ...

  8. sql server 性能调优之 逻辑内存消耗最大资源分析1 (自sqlserver服务启动以后)

    一.概述 IO 内存是sql server最重要的资源,数据从磁盘加载到内存,再从内存中缓存,输出到应用端,在sql server 内存初探中有介绍.在明白了sqlserver内存原理后,就能更好的分 ...

  9. JavaEE 要懂的小事：一、图解Http协议

    Writer      :BYSocket(泥沙砖瓦浆木匠) 微         博:BYSocket 豆         瓣:BYSocket FaceBook:BYSocket Twitter   ...

  10. ADO.NET的整理

    ADO.NET的几个对象 Connection:管理数据库的连接 Command:对数据库执行命令 DataReader:数据流读取器,返回的数据都是快速的且只是“向前”的数据流.无法实例化,只能通过 ...