Vue.js 教程 (3) : 过滤器 Filters
发布在Vue.js 中文入门2014年2月11日view:21907
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

和指令一样,Vue.js 的过滤器也是跟 Angular 一样的概念。简单来说,就是一个函数,获得一个值,进行一些处理,然后返回处理后的值。当一个值从一个个过滤器中传递过去以后,最后得到我们想要的值,就像光线穿过相机镜头的一层层滤镜一样。

在Vue.js的模板里,过滤器用 | 来开头,和 Unix 命令行的 pipe 一样:

{{message | uppercase}}

最后输出的结果就是将 message 的值传递进 uppercase 过滤器之后的值。多个过滤器可以叠加:

{{message | reverse | uppercase}}

这里的 reverse 并不是 Vue.js 自带的。要实现它非常简单:

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})

过滤器是个很简单的概念。不过在 Vue.js 里有一个特殊的过滤器,key。它只能和侦听DOM事件的 v-on 指令配合使用。要知道怎么用 v-on,请看下一篇…

评论
发表评论
2年前
添加了一枚【评注】:fa
3年前
赞了此文章!
3年前
赞了此文章!
4年前
赞了此文章!
4年前

@pockry 。。。。

4年前
赞了此文章!
4年前
添加了一枚【评注】:111
4年前
赞了此文章!
5年前
添加了一枚【评注】:1
5年前

@pockry 官方文档是英文的,这里只是个教程,而且暂时还未更新到 0.11… 不过有位同学自发翻译了 0.11 的文档:vuejs.net (我没有仔细看,可能会有翻译错误)

5年前

因文档不详细,发现的坑如下: Vue版本0.11

自定义filter需要在new Vue()前面才能生效; 自定义带参数filter, 参数在value后面,在v-text中参数不需要引号

另外分享一个三元运算符filter示例:

{{message | isTrue hehe}}

Vue.filter('isTrue', function (value, text) { return value ? value : text });

作者大大的文档还需努力~

WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏