文档章节

vue2自定义过滤器模糊查询

Smile_Lee
 Smile_Lee
发布于 2017/07/07 09:44
字数 156
阅读 9
收藏 0
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input type="text" v-model='search' />
    <ul v-for="item in searchData ">
        <li>{{item.name}},价格:¥{{item.price}}</li>
    </ul>
</div>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            products: [{
                name: '苹果',
                price: 25,
                category: "水果"
            }, {
                name: '香蕉',
                price: 15,
                category: "水果"
            }, {
                name: '雪梨',
                price: 65,
                category: "水果"
            }, {
                name: '宝马',
                price: 2500,
                category: "汽车"
            }, {
                name: '奔驰',
                price: 10025,
                category: "汽车"
            }, {
                name: '柑橘',
                price: 15,
                category: "水果"
            }, {
                name: '奥迪',
                price: 25,
                category: "汽车"
            }, {
                name: '火龙果',
                price: 25,
                category: "工具"
            }]
        },
        computed: {
            searchData: function() {
                var search = this.search;
                if (search) {
                    return this.products.filter(function(product) {
                        return Object.keys(product).some(function(key) {
                            return String(product[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }

                return this.products;
            }
        }
    })
</script>
</body>
</html>

本文转载自:https://segmentfault.com/q/1010000007803062/a-1020000007809463

Smile_Lee
粉丝 3
博文 3
码字总数 0
作品 0
成都
私信 提问
iOS开发之CoreImage框架使用

iOS开发之CoreImage框架使用 CoreImage框架是一个专门用来对图片进行处理的框架,其中提供了许多高级功能,可以帮助开发者完成UIKit或者CoreGraphics框架无法完成的任务,并且使用CoreImage...

珲少
2018/12/22
500
0
《Vue2.0 实践揭秘》终于出版啦!

这本书是去年搞Vue项目时头脑一发热就找编辑说要写这么一个题材的一本书。折腾了大半年终于是上市销售了,今天偶然打开京东查了一下竟然已经开卖了,心里面是有点小激动,毕竟这是我上架的第...

rayliang
2017/04/21
0
0
OpenDigg前端开源项目月报201704

由OpenDigg 出品的前端开源项目月报第一期来啦。我们的前端开源月报集合了OpenDigg一个月来新收录的优质前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具。 reactide React web...

OpenDigg
2017/04/12
0
0
elasticsearch Query DSL(一)

本文参考官方提供api提炼出来的 https://www.elastic.co/guide/en/elasticsearch/reference/current/search.html Query DSL Elasticsearch提供基于JSON的完整查询DSL(域特定语言)来定义查询...

watermelon11
2018/11/09
233
0
RediSearch 1.2.0 发布, 高性能全文搜索引擎

RediSearch 1.2.0 发布,此版本包含很多新的酷炫功能,包括: 聚合过滤器 查询属性 模糊匹配 有条件的更新 反斜杠转义 同义词支持 详情见发布公告。 RediSearch 是一个高性能的全文搜索引擎,...

淡漠悠然
2018/05/16
2.5K
5

没有更多内容

加载失败,请刷新页面

加载更多

Linux 运行shell文件,出现 $'\r': command not found

运行编写的shell脚本时,出现了 $'\\r': command not found 这样的错误提示。 报错的原因是我们在windows系统操作时,编辑器里的换行符是\r\n ,而Linux上为\n,两个系统之间有差异导致的。 ...

芥末无敌
今天
7
0
Java数据结构(上)

枚举(Enumeration) 位集合(BitSet) 向量(Vector) 栈(Stack) 1.Enumeration(枚举) boolean hasMoreElements( ):测试是否有更多的元素 Object nextElement( ):如果此枚举对象至少还...

Firefly-
昨天
11
0
vue 跨层组件通讯 provide inject

https://cn.vuejs.org/v2/api/#provide-inject 类型: provide:Object | () => Object inject:Array<string> | { [key: string]: string | Symbol | Object } 详细: provide 和 inject 主......

阿豪boy
昨天
7
0
黑马程序员面试宝典(Java)Beta6.0免费下载

场景 JavaSE基础 面向对象特征以及理解 访问权限修饰符区别 理解clone对象 JavaSE语法 java有没有goto语句 &和&&的区别 如何跳出当前的多重嵌套循环? 是否可以继承String? 重载与重写的区别...

badaoliumang
昨天
9
0
监控linux系统状态

查看系统负载: w/uptime 最后面三个数字表示1分钟,5分钟,15分钟平均有多少个进程占用CPU 占用CPU的进程可以是Running,也可以是Waiting 某一时刻1颗CPU只能有一个进程在使用其资源 #查看c...

asnfuy
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部