Vue 2参考手册
指南 | Guide
18. Filters(过滤器)
Vue.js允许您定义可用于应用常见文本格式的过滤器。过滤器可用于两处:胡子内接 和 表达式(后者在2.1.0+中支持)。过滤器应附加到JavaScript表达式的末尾,用“管道”符号表示:v-bind
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数总是接收表达式的值(前一个链的结果)作为其第一个参数。在这个例子中,capitalize
过滤器函数将接收message
作为其参数的值。
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
过滤器可以链接在一起:
{{ message | filterA | filterB }}
在这种情况下,filterA
用单个参数定义,将接收到的值message
,然后filterB
函数将被调用,并将结果filterA
传递给filterB
单个参数。
过滤器是JavaScript函数,因此它们可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里filterA
定义为一个带三个参数的函数。值message
将被传递到第一个参数。纯字符串'arg1'
将filterA
作为第二个参数传入,并且表达式的值arg2
将被评估并作为第三个参数传入。
指南 | Guide相关
Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
主页 | https://vuejs.org/ |
源码 | https://github.com/vuejs/vue |
版本 | 2 |
发布版本 | 2.5.2 |