直接贴代码了：

先上输入前的样子：

<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. Python学习笔记【第三篇】：if判断、while循环、for循环

    如果某些条件满足,才能做某件事情,而不满足时不允许做,这就是所谓的判断 不仅生活中有,在软件开发中“判断”功能也经常会用到 if判断语句 if 要判断的条件: 条件成立 num = 50 if num ...

  2. Kali学习笔记21：缓冲区溢出实验（漏洞发现）

    上一篇文章,我已经做好了缓冲区溢出实验的准备工作: https://www.cnblogs.com/xuyiqing/p/9835561.html 下面就是Kali虚拟机对缓冲区溢出的测试: 已经知道 ...

  3. Vue 中是如何解析 template 字符串为 VNode 的?

    在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解. 很明显,回答失败. ...

  4. axios 安卓低版本兼容性处理

    问题: 在较低版本的android手机中发现封装的 http 无效,我测试使用的是android 4.4的老手机,主要就是无法使用promise. 解决方案 安装 npm install es6-pr ...

  5. Spring框架(1)---Spring入门

    Spring入门 为了能更好的理解先讲一些有的没的的东西: 什么是Spring Spring是分层的JavaSE/EE full-stack(一站式) 轻量级开源框架 分层 SUN提供的EE的三层结构 ...

  6. linux定时任务执行没结果，手动执行有结果问题总结

    今天写了个脚本手动执行有结果,但是放到系统定时任务跑却没结果,之前也遇到这种问题解决了没记录后面又懵逼了一次~~~ 如下图: 手动执行有结果 放到定时任务中每五分钟执行一次 解决方法: 脚本中加载系统 ...

  7. java字符流操作flush()方法及其注意事项

    java字符流操作flush()方法及其注意事项   flush()方法介绍 查阅文档可以发现,IO流中每一个类都实现了Closeable接口,它们进行资源操作之后都需要执行close()方法将流关闭 ...

  8. vue的router-link传参问题

    一般来说,可以通过查询字符串的方式将参数传过去,方法如下: <router-link :to="{path:'/Detail', query:{ name: id }}"&g ...

  9. springboot redis(单机/集群)

    前言 前面redis弄了那么多, 就是为了在项目中使用. 那这里, 就分别来看一下, 单机版和集群版在springboot中的使用吧.  在里面, 我会同时贴出Jedis版, 作为比较. 单机版 1. ...

  10. 流式大数据计算实践（2）----Hadoop集群和Zookeeper

    一.前言 1.上一文搭建好了Hadoop单机模式,这一文继续搭建Hadoop集群 二.搭建Hadoop集群 1.根据上文的流程得到两台单机模式的机器,并保证两台单机模式正常启动,记得第二台机器core ...