直接贴代码了：

先上输入前的样子：

<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. Spring Cloud Config采坑记

    1. Spring Cloud Config采坑记 1.1. 问题 在本地运行没问题,本地客户端服务能连上本地服务端服务,可一旦上线,发现本地连不上线上的服务 服务端添加security登录加密,客户 ...

  2. Linux主机操作系统加固规范

      对于企业来说,安全加固是一门必做的安全措施.主要分为:账号安全.认证授权.协议安全.审计安全.总的来说,就是4A(统一安全管理平台解决方案),账号管理.认证管理.授权管理.审计管理.用漏洞扫描工具 ...

  3. swiper在vue项目中的循环轮播bug以及点击事件

    一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播.自动播放都比较正常. 但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽. ...

  4. Hashtable 为什么不叫 HashTable？

    前几天在写<HashMap 和 Hashtable 的 6 个区别>这篇文章的时候,差点把 Hashtable 写成了 HashTable,后来看源码证实了是:Hashtable,小写的 ...

  5. VueJs(7)---计算属性和侦听器

    计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...

  6. rest-framework之认证组件

    认证组件 认证简介 作用:校验是否登录 首先定义一个类,集成BaseAuthentication,写一个方法:authenticate,在方法内部,实证过程,认证通过,返回None或者两个对象(use ...

  7. 在Mac OSX上配置Appium+Android自动化测试环境

    前提准备 开始正文之前,你需要准备好一些基本条件: 1.安装好Mac OSX 操作系统的设备 2.能够访问中国局域网以外资源的方法(没有也行,但很痛苦) 3.已经安装好 homebrew 4.已经安装 ...

  8. jquery调用javascript方法

    本来想找个“优雅”一点的方法,类似C#在调用C++方法时候的Invoke之类的.没找到,后来想想,其实也没必要,直接写就好了,算最优雅了吧.只是少了VS的Intelligence,有点不习惯罢了. 事 ...

  9. Java线程实现与安全

    目录 1. 线程的实现 线程的三种实现方式 Java线程的实现与调度 2. 线程安全 Java的五种共享数据 保证线程安全的三种方式 前言 本篇博文主要是是在Java内存模型的基础上介绍Java线程更 ...

  10. shell编程基础(三): 位置参数与shell脚本的输入输出

    一.位置参数和特殊变量 有很多特殊变量是被Shell自动赋值的,我们已经遇到了$?和$1,现在总结一下: 常用的位置参数和特殊变量: $0 相当于C语言main函数的argv[0] $1.$2... ...