过滤器
1、定义全局过滤器
Vue.filter('formatSex', function (value) {
switch (value) {
case 1: return '男';
case 2: return '女';
default: return '不详'
}
})
2、定义组件内部的过滤器
filters: {
formatSex: function (value) {
switch (value) {
case 1: return '男';
case 2: return '女';
default: return '不详'
}
}
}
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
// 过滤器可以串联
{{ message | filterA | filterB }}
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上个例子中,过滤器 filterA
函数将会收到 message
的值作为第一个参数。
{{ message | filterA('arg1', arg2) }}
上面 filterA
被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 ‘arg1
’ 作为第二个参数,表达式 arg2
的值作为第三个参数。
全局过滤器封装单独文件
1、新建 filters.js 文件,并在内部写入全局过滤器
export const formatSex = value => {
switch (value) {
case 1: return '男';
case 2: return '女';
default: return '不详'
}
}
export ...
2、在入口文件 main.js 中引入全局过滤器,并注册
import * as filters from './filters/filters.js'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[keys])
})