直接贴代码了：

先上输入前的样子：

<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. Metasploit Framework（2）Exploit模块、Payload使用

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Exploit模块分为主动和被动(Active.Pas ...

  2. 【MySQL】sql_mode引起的一个问题和总结

    [背景] 之前项目中,项目组计划将现场的MySQL5.5升级到5.7,以提升主从同步性能.使用半同步复制,以及解决一些现场问题等.安排测试组进行验证,测试同事反馈实验室环境中发现有入库失败,我查看了e ...

  3. 【Spark调优】数据倾斜及排查

    [数据倾斜及调优概述] 大数据分布式计算中一个常见的棘手问题——数据倾斜: 在进行shuffle的时候,必须将各个节点上相同的key拉取到某个节点上的一个task来进行处理,比如按照key进行聚合或j ...

  4. 利用node 剥取其他网站的文档数据结构 ---

    1.如何利用nodejs获取其他网站的文档结构呢 以下是代码演示------! //首先需要引入一些核心模块 var http = require('http'); var fs = require( ...

  5. vsCode 设置vue 保存自动格式化代码

    setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tab ...

  6. nginx入门教程

    nginx入门教程 一.概述    什么是nginx?   Nginx (engine x) 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器.   什么是反向 ...

  7. NLog 自定义Target

    http://nlog-project.org/2015/06/30/extending-nlog-is-easy.html 新建一个类库,命名规则为NLog.*.dll 定义一个类输出日志到Rabb ...

  8. Android--通过Application传递数据

    在整个Android程序中,有时需要保存某些全局的数据(如:用户信息),方便在程序的任何地方调用.在Activity之间数据传递中有一种比较使用的方式,就是全局对象,使用过J2EE的都应该知道Java ...

  9. Linux软件包管理之源码包、脚本安装包

    目录 1.源码包和RPM包的区别 RPM包和源码包默认安装位置: 由于安装位置不同带来的影响 2.源码包安装 ①.安装准备 ②.安装注意事项 ③.安装源码包 3.源码包卸载 4.脚本安装包 5.总结 ...

  10. 项目实战2.1—nginx 反向代理负载均衡、动静分离和缓存的实现

    总项目流程图,详见 http://www.cnblogs.com/along21/p/8000812.html 实验一:实现反向代理负载均衡且动静分离 1.环境准备: 机器名称 IP配置 服务角色 备 ...