Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。

<body>

    <div class="app">

        <input type="text" v-model="name">

        <ul>

            <li v-for="user in newUsers" >

                {{ user.name }}

            </li>

        </ul>

    </div>

    <script>

        new Vue({

            el: '.app',

            data: {

                name: '',

                users: [

                    { name: 'Bruce' },

                    { name: 'Chuck' },

                    { name: 'Jackie' },

                    { name: '赵' }

                ]

            },

            computed: {

                newUsers: function () {

                    var that = this;

                    return that.users.filter(function (user) {

                        return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;

                    })

                }

            }

        })

    </script>

</body>

Vue2.0实现1.0的搜索过滤器功能的更多相关文章

  1. vue2.0 与 vue3.0 配置的区别

    提示:要了解vue2.0与vue3.0区别,首先你要熟悉vue2.0 从最明显最简单的开始 项目目录结构 可以明显的看出来,vue2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了cs ...

  2. Webx.0-Web2.0：Web2.0

    ylbtech-Webx.0-Web2.0:Web2.0 Web2.0 是相对于Web1.0 的新的时代.指的是一个利用Web的平台,由用户主导而生成的内容互联网产品模式,为了区别传统由网站雇员主导生 ...

  3. Nuget自己打包引用的时候出现错误：Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package 1.0.1 supports: net (.NETFramework,Version=v0.0)

    Nuget自己打包引用的时候出现错误:Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package ...

  4. AFNetworking2.0和AFNetworking3.0 的HTTPS的配置

    前言: 由于苹果声明在前说是2017.01.01之后提交审核的APP,必须使用HTTPS请求,要不就直接驳回审核,吓得我们年前赶紧提交了一个版本,想着年后在弄这个https,结果又有消息说是苹果推迟了 ...

  5. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...

  6. Solr 5.5.0 + tomcat 7.0.69 + zookeeper-3.4.6 Cloud部署

    Solr介绍:Solr是一个独立的企业级搜索应用服务器,Solr基于Lucene的全文搜索服务器,同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对查询性能进行了 ...

  7. vue.js学习：1.0到2.0的变化（区别）

    一.生命周期 1.1.0的生命周期: 周期 解释 init 组件刚刚被创建,但Data.method等属性还没被计算出来 created 组件创建已经完成,但DOM还没被生成出来 beforeComp ...

  8. vue1.0到2.0

    vue1.0到2.0 vue2.0 新手教程(一)   想想自己写vue的项目也写了一年了,从vue1.0到2.0,走过不少路,填过不少坑, 下面记录一下新手从0到1的过程,本文“应该”会持续更新 首 ...

  9. 保姆级教程——Ubuntu16.04 Server下深度学习环境搭建：安装CUDA8.0，cuDNN6.0，Bazel0.5.4，源码编译安装TensorFlow1.4.0(GPU版)

    写在前面 本文叙述了在Ubuntu16.04 Server下安装CUDA8.0,cuDNN6.0以及源码编译安装TensorFlow1.4.0(GPU版)的亲身经历,包括遇到的问题及解决办法,也有一些 ...

随机推荐

  1. 【Gson】互相转化

    Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库.可以将一个 JSON 字符串转成一个 Java 对象,或者反过来. 对象转为字符串 Strin ...

  2. time的用法

    线程计时器(System.Threading.Timer) System.Windows.Threading.DispatcherTimer tRecorderTimer; if (tRecorder ...

  3. 【刷题记录】首师附NOIP练习20160820

    [由于老师不让发题目,So只能发考点喽!!!!噜噜噜] [题目(嘘~~~~~)]:百度云下载 [T1]:好像是DP,路径压缩+排序+分情况处理100分(噜噜噜) [T2]:正解好难的样子,DFS乱搞了 ...

  4. nodejs之主机不能访问到虚拟机的web服务器

    问题:在主机使用VMware搭建虚拟机,并运行node.但是主机浏览器不能访问 环境:虚拟机使用centos7,网络模式为桥接.主机IP 192.168.1.48  虚拟机IP 192.168.1.5 ...

  5. fly bird

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 关于WORD文档的读取乱码问题

    一直以来都是用File类操作txt文档,今天想尝试能不能打开word文档,无奈,尝试了UTF8,Unicode,Default....等编码方式,打开文件都是乱码,电脑甚至发出警报声. 以下只取一种编 ...

  7. 配置gradle.properties

    在一些项目中会分拆app 和 lib , 这时候引用support的时候,一旦更改版本会出现需要同步更改两个地方的问题.这种情况,可以通过配置gradle.properties实现替换. 在项目编译过 ...

  8. UVALive-4839 HDU-3686 Traffic Real Time Query System 题解

    题目大意: 有一张无向连通图,问从一条边走到另一条边必定要经过的点有几个. 思路: 先用tarjan将双连通分量都并起来,剩下的再将割点独立出来,建成一棵树,之后记录每个点到根有几个割点,再用RMQ求 ...

  9. java排序学习笔记

    前面写了js的排序实现,总得玩玩java的哈. 同样,冒泡.选择.快速(这三个之前实现过也写过文章).堆排序,然后做比较. 主要遇到的难点: - -||想轻松点写个封装计时的逻辑,不想每调用一个排序就 ...

  10. BJITJobs : 北京IT圈高端职位招聘信息，成功率最高的高端求职渠道

    你有实力,但比你差的人都升了,你的师弟都年薪50万了,你还是找不到机会.为什么你离高端机会总是差一步呢?其实你离成功就差一次机会,一个适合你的高端职位的信息! 招聘网站不靠谱:三大网站都是低端职位为主 ...