直接贴代码了：

先上输入前的样子：

<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. [Swift-2019力扣杯春季初赛]3. 最小化舍入误差以满足目标

    给定一系列价格 [p1,p2...,pn] 和一个目标 target,将每个价格 pi 舍入为 Roundi(pi) 以使得舍入数组 [Round1(p1),Round2(p2)...,Roundn( ...

  2. java中this的N种使用方法

    this可能是几乎所有有一点面向对象思想的语言都会引用到的变量,java自然不例外.只是,this有多少种用法,我也不知道了,让我们来see see. 由简入奢! 易. 来个例子说明下: public ...

  3. Scala - 快速学习02 - 搭建开发环境

    1- 下载与安装 下载链接:http://www.scala-lang.org/download/ CMD To run Scala from the command-line, simply dow ...

  4. [EXP]Microsoft Windows - DfMarshal Unsafe Unmarshaling Privilege Escalation

    Windows: DfMarshal Unsafe Unmarshaling Elevation of Privilege (Master) Platform: Windows (not tested ...

  5. mysql 开发进阶篇系列 49 表的数据导出(into outfile，mysqldump)

    一.概述 在数据库的日常维护中,表的导入和导出是很频繁的操作,本篇讲解如何使用导入功能,并以案例为演示.某些情况下,需要将表里的数据导出为某些符号分割的纯数据文本,而不是sql语句,比如:(1)用来作 ...

  6. Java多线程之二(Synchronized)

    常用API method 注释 run() run()方法是我们创建线程时必须要实现的方法,但是实际上该方法只是一个普通方法,直接调用并没有开启线程的作用. start() start()方法作用为使 ...

  7. ACM--string常见用法

    在ACM竞赛中,常常需要将读入的数字的每位分离出来,如果采用取余的方法,花费的时间就会太长,这时候,我们可以将读入的数据当成字符串来处理,这样就方便.省时多了.下面这个程序演示了求一个整数各位的和: ...

  8. centos7非centos标准服务 /etc/init.d/service_name start || stop 启动异常

    公司自己写的java程序,在centos7系统执行/etc/init.d/service_name start||stop的时候报错: grafana二次开发的程序 [root@docp1 init. ...

  9. 【原创】深入理解c++的右值引用

    0 左值和右值     一个左值表达式代表的是对象本身,而右值表达式代表的是对象的值:变量也是左值.   1 右值引用作用 为了支持移动操作(包括移动构造函数和移动赋值函数),C++才引入了一种新的引 ...

  10. 如何用Python编写一个聊天室

    一.课程介绍 1.简介 本次项目课是实现简单聊天室程序的服务器端和客户端. 2.知识点 服务器端涉及到asyncore.asynchat和socket这几个模块,客户端用到了telnetlib.wx. ...